html模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Basic</title>
<script src="../lib/three.js"></script>
<style>
body{
margin:0;
overflow:hidden;
}
</style>
</head>
<body>
<!--div which will hold the Output-->
<div id="WebGL-output">
</div>
<!--javacript code that runs our three.js example-->
<script>
function init(){
};
window.onload=init;
</script>
</body>
</html>
function init(){
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45,window.innerHeight/window.innerWidth,0.1,1000);
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xEEEEEE);
renderer.setSize(window.innerWidth,window.innerHeight);
var axes = new THREE.AxesHelper(20);
scene.add(axes);
var planeGeometry = new THREE.PlaneGeometry(60,20,1,1);
var planeMeterial = new THREE.MeshBasicMaterial({color:0xcccccc});
var plane = new THREE.Mesh(planeGeometry,planeMeterial);
plane.rotation.x=-0.5*Math.PI;
plane.position.x=15;
plane.position.y=0;
plane.position.z=0;
scene.add(plane);
var cubeGeometry = new THREE.BoxGeometry(4,4,4);
var cubeMeterial = new THREE.MeshBasicMaterial({color:0xff000,wireframe:true});
var cube = new THREE.Mesh(cubeGeometry,cubeMeterial);
cube.position.x=-4;
cube.position.y=3;
cube.position.z=0;
scene.add(cube);
var sphereGeometry = new THREE.SphereGeometry(4,20,20);
var sphereMeterial = new THREE.MeshBasicMaterial({color:0x7777ff,wireframe:true});
var sphere = new THREE.Mesh(sphereGeometry,sphereMeterial);
sphere.position.x=20;
sphere.position.y=4;
sphere.position.z=2;
scene.add(sphere);
camera.position.x=-60;
camera.position.y=80;
camera.position.z=60;
camera.lookAt(scene.position);
document.getElementById("WebGL-output").appendChild(renderer.domElement);
renderer.render(scene,camera);
};
window.onload=init();
屏幕快照 2018-06-11 下午8.02.51.png
