我的第一个three.js应用
本帖最后由 tzbm123456 于 2022-3-4 12:47 编辑<!doctype html>
<html>
<head>
<title>我的第一个three.js应用</title>
<script src="../build/three.js"></script>
<script type="text/javascript" src="../examples/js/controls/OrbitControls.js"></script>
<script type="text/javascript" src="../src/math/Vector3.js"></script>
<style>
body { margin: 0; }
canvas { display: block; }
</style>
<script>
function init(){
//创建场景和相机
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
//创建设置渲染器，并添加至body
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement ); //以下三种鼠标事件方式均可
//document.body.addEventListener("click",ceshi);
//document.getElementsByTagName("body").addEventListener("mousedown",ceshi);ceshi后面不能跟()
document.body.addEventListener("click",function(evt){
console.log("X: " + evt.offsetX + ", Y: " + evt.offsetY);
alert("OOKK");
});
//创建cube，并添加至scene
var geometry = new THREE.BoxGeometry();
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
//调整相机位置
camera.position.z = 5;
//显示实体
function render() {
renderer.render( scene, camera );
};
render();
//移动相机
var controls = new THREE.OrbitControls(camera,renderer.domElement);//创建控件对象
controls.addEventListener('change', render);//监听鼠标、键盘事件
}
function ceshi(){
alert("OOKK!");
}
</script>
</head>
<body>
</body>
</html>
页:
[1]