<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>333</title> ???<style> ???????html, body { ???????????margin: 0; ???????????padding: 0; ???????} ???????#three_canvas { ???????????position: absolute; ???????????width: 100%; ???????????height: 100%; ???????} ???</style></head><body> ???<canvas id="three_canvas"></canvas> ???<script src="js/three.js"></script> ???<script> ???????//定义一些需要的变量 ???????var renderer, camera, scene, light, object; ???????var width, height; ???????//初始化 ???????function initRenderer(){ ???????????width=document.getElementById(‘three_canvas‘).clientWidth; ???????????height=document.getElementById(‘three_canvas‘).clientHeight; ???????????renderer=new THREE.WebGLRenderer({ ???????????????//将canvas绑定到renderer ???????????????canvas:document.getElementById(‘three_canvas‘) ???????????}); ???????????renderer.setSize(width,height);//将渲染的大小设为canvas相同 ???????????renderer.setClearColor(0xFFFFFF, 1.0);//设置默认颜色与透明度 ???????}; ???????//初始化场景 ???????function initScene(){ ???????????scene = new THREE.Scene(); ???????}; ???????//初始化相机 ???????function initCamera(){ ???????????//简单的正交投影相机，正对着视口中心，视口大小与canvas大小相同 ???????????camera = new THREE.OrthographicCamera(width/-2,width/2,height/2,height/-2,1,1000); ???????????//设置相机的位置 ???????????camera.position.x=0; ???????????camera.position.y=0; ???????????camera.position.z=200; ???????????//设置相机的上方向 ???????????camera.up.x=0; ???????????camera.up.y=1; ???????????camera.up.z=0; ???????????//设置相机聚焦的位置（其实就是确定一个方向） ???????????camera.lookAt({ ???????????????x:0, ???????????????y:0, ???????????????z:0 ???????????}) ???????}; ???????//该添加一个立方体到场景中了 ???????function initObject(){ ???????????//创建一个边长为100的立方体 ???????????var geometry = new THREE.CubeGeometry(100,100,100); ???????????object = new THREE.Mesh(geometry,new THREE.MeshNormalMaterial()); ???????????//法向材质MeshNormalMaterial这样立方体每个面的颜色与这个面对着的方向是相关的，更便于观察/调试。 ???????????//在这个简单的demo里我不打算添加光影效果，而法向材质对光也是没有反应的。 ???????????scene.add(object); ???????} ???????//最后要动起来，创建一个动画循环 ???????function render(){ ???????????// requestAnimFrame，它会自动在每次页面重绘前调用传入的函数。 ???????????requestAnimationFrame(render); ???????????object.rotation.x +=0.05; ???????????object.rotation.y +=0.05; ???????????renderer.render(scene,camera); ???????} ???????//调用 ???????function threeStart(){ ???????????initRenderer(); ???????????initCamera(); ???????????initScene(); ???????????initObject(); ???????????render(); ???????}; ???????window.onload=threeStart(); ???</script></body></html>
threejs学习笔记01
原文地址：http://www.cnblogs.com/Webyangbowen/p/8043467.html