第一个Three.js程序——动手写一个简单的场景

第一个Three.js程序——动手写一个简单的场景

三维场景基本要素:

第一个Three.js程序——动手写一个简单的场景

步骤:

第一个Three.js程序——动手写一个简单的场景

代码:

第一个Three.js程序——动手写一个简单的场景

第一个Three.js程序——动手写一个简单的场景

源码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/three.js"></script>
<style>
html,body{background: #000000;}
</style>
</head>
<body>
<script type="text/javascript">
var scene = new THREE.Scene(); var geometry = new THREE.CubeGeometry(100,100,100);
var material = new THREE.MeshLambertMaterial({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); var camera = new THREE.PerspectiveCamera(40 , 800/600, 1, 1000);
camera.position.set(200,200,200);
camera.lookAt(scene.position); var renderer = new THREE.WebGLRenderer();
renderer.setSize(800,600);
document.body.appendChild(renderer.domElement); renderer.render(scene,camera);
</script>
</body>
</html>
上一篇:HDU2688 树状数组(逆序数)


下一篇:原生js 基于canvas写一个简单的前端 截图工具