[javascript]代码库
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/three.min.js"></script>
<script src='js/OrbitControls.js'></script>
<script src='js/Detector.js'></script>
<script src="js/BinaryLoader.js"></script>
<script src="js/stats.min.js"></script>
<div id="onGeometry" style="width:500px; height: 500px;">
</head>
<body>
<script type="text/javascript">
var scene = new THREE.Scene();//创建场景
var textureCube = new THREE.CubeTextureLoader()
.setPath( 'images/')
.load( [ 'posx.jpg', 'negx.jpg', 'posy.jpg', 'negy.jpg', 'posz.jpg', 'negz.jpg' ] );//添加天空盒子背景图
scene.background = textureCube;
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);//添加相机
camera.position.z = 5;
var geometry = new THREE.CubeGeometry(1,1,1);
var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
var cube = new THREE.Mesh(geometry, material); scene.add(cube);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
var container=document.getElementById('onGeometry').appendChild(renderer.domElement);
var orbit = new THREE.OrbitControls( camera, container );
orbit.addEventListener( 'change', render );
function render() {
requestAnimationFrame(render);
// cube.rotation.x += 0.1;
// cube.rotation.y += 0.1;
renderer.render(scene, camera);
}
render();
</script>
</body>
</html>
by: 发表于:2018-05-29 09:45:50 顶(0) | 踩(0) 回复
??
回复评论