<!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 { width: 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>
