IT博客汇 | [原]学习 WebGL 的开源库 Three.js

[原]学习 WebGL 的开源库 Three.js

u010019717发表于 2017-03-17 09:25:32

孙广东 2017.3.4

http://blog.csdn.NET/u010019717

百度第一个词条是： http://hewebgl.com/ 然后就照着学习呗，后面是需要花钱的！

开发环境搭建

VS Code（编辑器） + python（自带的文件服务器） + Three.js（WebGL）库

1、新建一个空的文件夹 “ThreeWebglProject”，然后使用VS Code打开

2、Ctrl + · 启动终端，输入命令： git clone https://github.com/mrdoob/three.js.git 下载Three.js 项目到这个路径下。

3、新建第一个文件： Test1.html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);

var renderer = new THREE.WebGLRenderer();

renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);

var geometry = new THREE.CubeGeometry(1,1,1);

var material = new THREE.MeshBasicMaterial({color: 0x00ff00});

var cube = new THREE.Mesh(geometry, material); scene.add(cube);

camera.position.z = 5;

function render() {

requestAnimationFrame(render);

cube.rotation.x += 0.1;

cube.rotation.y += 0.1;

renderer.render(scene, camera);

}

render();

</script>

</body>

</html>

4、在资源管理器中双击这个文件，在浏览器中打开。我这是不会正常运行的！

你可以在浏览器中 F12 看问题。

5、我解决问题是使用Python自带的文件服务器

还是在 vscode 的终端内输入：（看你安装了哪个版本就执行哪个命令）

Python2.x : python -m SimpleHTTPServer 8000

Python3.x : python -m http.server 8000

在浏览器中输入网址：

http://127.0.0.1:8000/

浏览器打开的这个页面不用关闭，每次改动完刷新就行了！

另外两个个依赖库的下载：

git clone https://github.com/tweenjs/tween.js.git

git clone https://github.com/mrdoob/stats.js/.git

其实就是 Stats.js 和 Tween.js 两个文件有用，但是如果你不想破环案例的正常使用，可以把他们单独拷贝出来，而不是移动！

可能会有更好的方式，比如创建一个web 项目？我不知道怎么弄

可以使用 BootCDN

不下载这三个模块，使用在线的！需要什么包，搜索就行了，没有的就没有办法了

http://www.bootcdn.cn/three.js/

<scriptsrc="http://cdn.bootcss.com/three.js/r83/three.js"></script>

http://www.bootcdn.cn/stats.js/

<scriptsrc="http://cdn.bootcss.com/stats.js/r17/Stats.js"></script>

http://www.bootcdn.cn/tween.js/

<scriptsrc="http://cdn.bootcss.com/tween.js/r14/Tween.js"></script>

还是划线的例子：

<!DOCTYPE html>

<html>

<head>

<title>ThreeF¶</title>

div#canvas-frame {

border: none;

cursor: pointer;

width: 100%;

height: 600px;

background-color: #EEEEEE;

}

</style>

var renderer;

function initThree() {

width = document.getElementById('canvas-frame').clientWidth;

height = document.getElementById('canvas-frame').clientHeight;

renderer = new THREE.WebGLRenderer({

antialias : true

});

renderer.setSize(width, height);

document.getElementById('canvas-frame').appendChild(renderer.domElement);

renderer.setClearColor(0xFFFFFF, 1.0);

}

var camera;

function initCamera() {

camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);

camera.position.x = 0;

camera.position.y = 1000;

camera.position.z = 0;

camera.up.x = 0;

camera.up.y = 0;

camera.up.z = 1;

camera.lookAt({

x : 0,

y : 0,

z : 0

});

}

var scene;

function initScene() {

scene = new THREE.Scene();

}

var light;

function initLight() {

light = new THREE.DirectionalLight(0xFF0000, 1.0, 0);

light.position.set(100, 100, 200);

scene.add(light);

}

var cube;

function initObject() {

var geometry = new THREE.Geometry();

var material = new THREE.LineBasicMaterial( { vertexColors: true } );

var color1 = new THREE.Color( 0x444444 ), color2 = new THREE.Color( 0xFF0000 );

// ¿„P(ïå12¹„œr³š

var p1 = new THREE.Vector3( -100, 0, 100 );

var p2 = new THREE.Vector3( 100, 0, -100 );

geometry.vertices.push(p1);

geometry.vertices.push(p2);

geometry.colors.push( color1, color2 );

var line = new THREE.Line( geometry, material, THREE.LinePieces );

scene.add(line);

}

function threeStart() {

initThree();

initCamera();

initScene();

initLight();

initObject();

renderer.clear();

renderer.render(scene, camera);

}

</script>

</head>

</body>

</html>

当然了，涉及到复杂的话就没有办法了，比如本地的模型资源，声音，纹理，本地其它的脚本，还是要使用一开始介绍的！