Three.js零基础入门教程(郭隆邦)鼠标操作三维场景旋转缩放代码

最新推荐文章于 2024-09-13 10:00:00 发布

每天发布一篇原创

最新推荐文章于 2024-09-13 10:00:00 发布

阅读量479

点赞数 1

分类专栏： three.js 文章标签： three.js

本文链接：https://blog.csdn.net/qq_26728817/article/details/118338399

版权

three.js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
    <script src="http://www.yanhuangxueyuan.com/threejs/examples/js/controls/OrbitControls.js"></script>
</head>
<style>
    body { margin: 0;overflow:hidden}
    canvas { width: 100%; height: 100% }
</style>
<body>

</body>
<script>
    var  scene=new THREE.Scene();
    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.append(renderer.domElement)
    var geometry =new THREE.BoxGeometry(1,1,1)
    var material= new THREE.MeshBasicMaterial({color:0x00ff00});
    var mesh=new THREE.Mesh(geometry,material)
    scene.add(mesh)
    camera.position.z = 5;
    function render(){
        renderer.render(scene,camera);//执行渲染操作
        requestAnimationFrame(render);//请求再次执行渲染函数render
    }
    render();
    var controls = new THREE.OrbitControls(camera,renderer.domElement);//创建控件对象
    // controls.addEventListener('change', render);//监听鼠标、键盘事件
</script>
</html>