html 代码
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- <script src="http://www.yanhuangxueyuan.com/3D/example/three.min.js"></script>
- <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
- <script src="http://wj.juccn.com/goods3d/js//DragControls.js"></script>
- <script src="http://wj.juccn.com/goods3d/js/TrackballControls.js"></script>
- <style>
- *{
- margin: 0;
- padding: 0;
- }
- </style>
- </head>
- <body onload="">
- <canvas id="OrthographicCamera" style="height: 300px; width: 400px;"></canvas>
- <canvas id="PerspectiveCamera" style="height: 300px; width: 400px;"></canvas>
- <canvas id="SphereGeometry" style="height: 300px; width: 400px;"></canvas>
- <canvas id="CylinderGeometry" style="height: 300px; width: 400px;"></canvas>
- <canvas id="TetrahedronGeometry" style="height: 300px; width: 400px;"></canvas>
- <!--<canvas id="OctahedronGeometry" style="height: 300px; width: 400px;"></canvas>
- <canvas id="IcosahedronGeometry" style="height: 300px; width: 400px;"></canvas>-->
- <canvas id="TorusGeometry" style="height: 300px; width: 400px;"></canvas>
- <canvas id="TorusKnotGeometry" style="height: 300px; width: 400px;"></canvas>
- <canvas id="Text" style="height: 300px; width: 400px;"></canvas>
- <script>
- // 正交相机
- // function init(){
- // var renderer = new THREE.webGLRenderer({
- // canvas:document.getElementById('mainCanvas')
- // });
- //
- // renderer.setClearColor(0x000000);
- // var scene = new THREE.Scene();
- //
- // var camera = new THREE.PerspectiveCamera(45,4/3,1,1000);
- //
- // camera.position.set(0,0,5);
- // scene.add(camera);
- //
- // var cube = new THREE.Mesh(new THREE.CubeGeometry(1,2,3),
- //
- // new THREE.MeshBasicMaterial({
- // color:0xff0000
- // })
- //
- // );
- // scene.add(cube)
- // renderer.render(scene,camera)
- // }
- OrthographicCamera()
- function OrthographicCamera(){
- var renderer = new THREE.WebGLRenderer({
- canvas:document.getElementById('OrthographicCamera')
- });
- renderer.setClearColor(0x33CC33);
- var camera = new THREE.OrthographicCamera(-1,3,1.5,-1.5,1,100)
- camera.position.set(4,-3,-5);
- camera.lookAt(new THREE.Vector3(0,0,0))
- var scene = new THREE.Scene();
- scene.add(camera);
- var cube = new THREE.Mesh(new THREE.CubeGeometry(1,2,3,0,0,3),
- new THREE.MeshBasicMaterial({
- color:0xff0000,
- wireframe:true
- })
- )
- scene.add(cube);
- renderer.render(scene,camera)
- }
- PerspectiveCamera()
- function PerspectiveCamera(){
- var renderer = new THREE.WebGLRenderer({
- canvas: document.getElementById('PerspectiveCamera')
- });
- renderer.setClearColor(0x000000);
- var scene = new THREE.Scene()
- var camera = new THREE.PerspectiveCamera(60,4/3,1,10);
- camera.position.set(2,-2,5);
- scene.add(camera);
- var cube = new THREE.Mesh(new THREE.CubeGeometry(1,1,1),
- new THREE.MeshBasicMaterial({
- color:0xff0000,
- wireframe:true
- })
- );
- scene.add(cube);
- renderer.render(scene,camera)
- }
- SphereGeometry();
- function SphereGeometry(){
- var renderer = new THREE.WebGLRenderer({
- canvas: document.getElementById('SphereGeometry')
- })
- renderer.setClearColor(0x33CCCC);
- var scene = new THREE.Scene();
- var camera = new THREE.PerspectiveCamera(60,4/3,1,1000);
- camera.position.set(3,3,5)
- camera.lookAt(new THREE.Vector3(0,0,0))
- scene.add(camera);
- var cube = new THREE.Mesh(new THREE.SphereGeometry(3,16,12,Math.PI/6,Math.PI/2,Math.PI/6,Math.PI/4),
- new THREE.MeshBasicMaterial({
- color:0x66CCFF,wireframe:true
- })
- )
- scene.add(cube);
- renderer.render(scene,camera)
- }
- CylinderGeometry()
- function CylinderGeometry(){
- var renderer = new THREE.WebGLRenderer({
- canvas: document.getElementById('CylinderGeometry')
- })
- renderer.setClearColor(0x33CCCC);
- var scene = new THREE.Scene();
- var camera = new THREE.PerspectiveCamera(60,4/3,1,1000);
- camera.position.set(3,4,5)
- camera.lookAt(new THREE.Vector3(0,0,0))
- scene.add(camera);
- var cube = new THREE.Mesh(new THREE.CylinderGeometry(2,2,4,50,3),
- new THREE.MeshBasicMaterial({
- color:0xFFFFFF,wireframe:true
- })
- )
- scene.add(cube);
- renderer.render(scene,camera)
- }
- TetrahedronGeometry()
- function TetrahedronGeometry(){
- var renderer = new THREE.WebGLRenderer({
- canvas:document.getElementById('TetrahedronGeometry')
- })
- renderer.setClearColor(0xFFFFFF);
- var scene = new THREE.Scene();
- var camera = new THREE.PerspectiveCamera(45,4/3,1,1000);
- camera.position.set(2,2,5);
- camera.lookAt(new THREE.Vector3(0,0,0));
- scene.add(camera);
- var cube = new THREE.Mesh(new THREE.TetrahedronGeometry(3),
- new THREE.MeshBasicMaterial({
- color:0xFFCCCC,wireframe:true
- })
- );
- scene.add(cube);
- renderer.render(scene,camera)
- };
- TorusGeometry()
- function TorusGeometry(){
- var renderer = new THREE.WebGLRenderer({
- canvas:document.getElementById('TorusGeometry')
- });
- renderer.setClearColor(0xffffff);
- var scene = new THREE.Scene();
- var camera = new THREE.PerspectiveCamera(45,4/3,1,1000);
- camera.position.set(3,3,9);
- camera.lookAt(new THREE.Vector3(0,0,0));
- scene.add(camera);
- var cube = new THREE.Mesh(new THREE.TorusGeometry(3,1,12,18),
- new THREE.MeshBasicMaterial({
- color:0x6699FF,wireframe:true
- })
- )
- scene.add(cube);
- renderer.render(scene,camera)
- }
- TorusKnotGeometry();
- function TorusKnotGeometry(){
- var renderer = new THREE.WebGLRenderer({
- canvas :document.getElementById('TorusKnotGeometry')
- })
- renderer.setClearColor(0xffffff);
- var scene = new THREE.Scene();
- var camera = new THREE.PerspectiveCamera(45,4/3,1,1000);
- camera.position.set(2,2,8);
- camera.lookAt(new THREE.Vector3(0,0,0))
- scene.add(camera);
- var cube = new THREE.Mesh(new THREE.TorusKnotGeometry(2,0.5,32,8),
- new THREE.MeshBasicMaterial({
- color:0x339966,wireframe:true
- })
- );
- scene.add(cube);
- //renderer.render(scene,camera);
- function render(){
- requestAnimationFrame(render);
- cube.rotation.x +=0.05;
- //cube.rotation.y +=0.1;
- //cube.rotation.z +=0.1;
- renderer.render(scene,camera)
- }
- render()
- }
- Text()
- function Text(){
- var renderer = new THREE.WebGLRenderer({
- canvas:document.getElementById('Text')
- })
- renderer.setClearColor(0xfffeee);
- var scene = new THREE.Scene();
- var camera = new THREE.PerspectiveCamera(45,4/3,1,1000);
- camera.position.set(3,3,5);
- camera.lookAt(new THREE.Vector3(0,0,0));
- scene.add(camera);
- var text = new THREE.Mesh(new THREE.TextGeometry('hello',{size:1,height:1}),
- new THREE.MeshBasicMaterial({
- color:0x0099CC,wireframe:true
- })
- )
- scene.add(text);
- function render(){
- requestAnimationFrame(render);
- text.rotation.y +=0.05;
- //cube.rotation.y +=0.1;
- //cube.rotation.z +=0.1;
- renderer.render(scene,camera)
- }
- render()
- }
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/article/45439/8f7dee517ee5ef899979c1646e17258e.html