three学习总结

Getting Started

• Creating the scene

  想让three展现任何东西，需要三样东西：A scene, a camera, and a renderer ``` var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); //renderer var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); //cube var geometry = new THREE.BoxGeometry( 1, 1, 1 ); var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); var cube = new THREE.Mesh( geometry, material ); scene.add( cube );

camera.position.z = 5; //rendering the scene function render() { requestAnimationFrame( render ); renderer.render( scene, camera ); //Animating the cube cube.rotation.x += 0.1; cube.rotation.y += 0.1; renderer.render(scene, camera); } render();

- Detecting WebGL and Browser compatibility

if (Detector.webgl) { init(); animate(); } else { var warning = Detector.getWebGLErrorMessage(); document.getElementById(‘container’).appendChild(warning); }

- Drawing lines

var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement);

var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 500); camera.position.set(0, 0, 100); camera.lookAt(new THREE.Vector3(0, 0, 0));

var scene = new THREE.Scene(); //create a blue LineBasicMaterial var material = new THREE.LineBasicMaterial({ color: 0x0000ff }); var geometry = new THREE.Geometry(); geometry.vertices.push(new THREE.Vector3(-10, 0, 0)); geometry.vertices.push(new THREE.Vector3(0, 10, 0)); geometry.vertices.push(new THREE.Vector3(10, 0, 0));

var line = new THREE.Line(geometry, material); scene.add(line); renderer.render(scene, camera);

- Creating Text:很多时候three.js应用程序要用到文字，有以下几种方式可选
    + DOM+CSS
    + Draw text to canvas and use as a Texture: 在canvas上绘制文本作为质地
    + Create a model in your favourite 3D application and export to three.js：在3D app中构建并暴露给three
    + Procedural Text Geometry：文本程序的几何
## Next Steps
- How to update things
> 所有对象若被添加到scene上则默认自动更新它们的矩阵;且可继承

var object = new THREE.Object3D; scene.add( object )

- Matrix transformations:矩阵变换
> Three利用矩阵3D变换---translations(position),rotations,and scaling。每个3D实例都有一个
存储了其位置，旋转及缩放的矩阵。
## Building tools
> Node环境用通过npm引入

$ npm install three –save-dev //文件中引入 var THREE = require(‘three’); ```

Reference

AnimationAction

Cameras

Lights

Lights/Shadows

Loaders

Materials

Math

Objects

Renderers

Renderers/Shaders

Scene