<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????html, body { ???????????margin: 0; ???????????padding: 0; ???????} ???????div#canvas-frame { ???????????border: none; ???????????cursor: pointer; ???????????width: 100%; ???????????height: 600px; ???????????background-color: #EEEEEE; ???????} ???</style></head><body><div id="canvas-frame"></div><script src="js/three.js"></script><script> ???//定义一些需要的变量 ???var renderer; ???var width, height; ???//初始化three ???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 = 0; ???????camera.position.z = 600; ???????camera.up.x = 0; ???????camera.up.y = 1; ???????camera.up.z = 0; ???????camera.lookAt({ ???????????x : 0, ???????????y : 0, ???????????z : 0 ???????}); ???} ???var scene; ???function initScene() { ???????scene = new THREE.Scene(); ???} ???var light; ???function initLight() { ???????light = new THREE.AmbientLight(0xFFFFFF); ???????light.position.set(100, 100, 200); ???????scene.add(light); ???????light = new THREE.PointLight(0x00FF00); ???????light.position.set(0, 0,300); ???????scene.add(light); ???} ???var cube; ???function initObject() { ???????var geometry = new THREE.CylinderGeometry( 100,150,400); ???????var material = new THREE.MeshLambertMaterial( { color:0xFFFF00} ); ???????var mesh = new THREE.Mesh( geometry,material); ???????mesh.position = new THREE.Vector3(0,0,0); ???????scene.add(mesh); ???} ???function threeStart() { ???????initThree(); ???????initCamera(); ???????initScene(); ???????initLight(); ???????initObject(); ???????animation(); ???} ???function animation() ???{ ???????//renderer.clear(); ???????camera.position.x =camera.position.x +1; ???????renderer.render(scene, camera); ???????requestAnimationFrame(animation); ???} ???window.onload = threeStart();</script></body></html>
threejs学习笔记04---相机动
原文地址：http://www.cnblogs.com/Webyangbowen/p/8058865.html