three.js入门

时间 2019-11-10

标签 three.js 入门栏目 JavaScript 繁體版

原文原文链接

1.下载three.js库。https://github.com/mrdoob/three.js/html

第一步：新建一个项目文件夹“Threejs”git

第二步：在Threejs文件夹内新建一个html文件（index.html）。该文件是经过浏览器进入游戏的入口。github

第三步：在Threejs文件夹内新建一个libs文件夹，用来存放three.js库和须要用到的其余库。编程

第四步：在Threejs文件夹内新建一个images文件夹，用来存放须要素材。浏览器

第五步：在Threejs文件夹内新建一个js文件夹，用来存放咱们开发项目写的脚本。app

index.html文件dom

<!DOCTYPE html>
<html>
<head>
    <title>three.js</title>
    <script src="libs/three.js"></script>
    <script src="js/main.js"></script>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<script>

</script>
<body>
</body>
</html>

three.js文件 在目录下创建libs文件夹，把three,js拷贝进去函数

https://raw.githubusercontent.com/mrdoob/three.js/master/build/three.jsui

main.js文件spa

var renderer;//渲染器
var scene;//场景
var camera;//相机
function init() {//init()函数是咱们整个项目的入口，相似咱们平时编程时的main函数。
    scene = new THREE.Scene();//场景
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);//相机
    renderer = new THREE.WebGLRenderer();//渲染
    renderer.setClearColor(0x000000, 1.0);
    renderer.setSize(window.innerWidth, window.innerHeight);

    document.body.appendChild(renderer.domElement);
    render();
}
function render() {
    requestAnimationFrame(render);
    renderer.render(scene, camera);
}
window.onload = init;

漆黑一片。由于咱们还没向场景添加任何东西。

1. three.js - (入门四)
2. three.js入门篇
3. three.js - (入门一)
4. Three.js 基础入门
5. three.js 入门案例
6. three.js 场景入门
7. three.js入门练习 (1)
8. three.js详解之一入门
9. three.js 入门详解(二)
10. three.js 入门详解(一)
更多相关文章...
• Memcached入门教程 - NoSQL教程
• Neo4j数据库入门教程 - NoSQL教程
• YAML 入门教程
• Java Agent入门实战（一）-Instrumentation介绍与使用