<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> body { margin: 0; } canvas { 100%; height: 100% } </style> <script src="./node_modules/three/three.js"></script> <script src="./node_modules/three/examples/js/controls/OrbitControls.js"></script> <script src="./node_modules/three/examples/js/loaders/OBJLoader.js"></script> </head> <body> <script> var scene = new THREE.Scene();//创建场景 var geometry = new THREE.BoxGeometry(100,100,100) //创建正方形 长宽高 var material = new THREE.MeshBasicMaterial({color:0xff0000})// 创建材质 var mesh = new THREE.Mesh(geometry,material)//创建网格 scene.add(mesh); var light = new THREE.PointLight(0xffffff);//创建光源 light.position.set(300,400,200) scene.add(light)//添加光源 scene.add(new THREE.AmbientLight(0x333333)) var camera = new THREE.PerspectiveCamera(40,800/600,1,1000); //创建相机 camera.position.set(100,200,200); camera.lookAt(scene.position); var renderer = new THREE.WebGLRenderer(); //渲染器 renderer.setSize(800,600); document.body.appendChild(renderer.domElement); renderer.render(scene,camera); function render(){ renderer.render(scene,camera); } var controls = new THREE.OrbitControls(camera); //相机控制器 鼠标 controls.addEventListener('change',render) // 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 ); </script> </body> </html>
