threeJs animate以及鼠标的控制

最新推荐文章于 2024-08-09 17:35:20 发布

侒然

最新推荐文章于 2024-08-09 17:35:20 发布

阅读量967

点赞数

分类专栏：前端 JavaScript 文章标签： three.js webgl

本文链接：https://blog.csdn.net/Janent168/article/details/116988007

版权

前端同时被 2 个专栏收录

36 篇文章 0 订阅

订阅专栏

JavaScript

8 篇文章 0 订阅

订阅专栏

js引用

<script src="js/three.js"></script>
<script src="js/TrackballControls.js"></script>

鼠标的控制

  controls = new THREE.TrackballControls( camera, renderer.domElement ); //鼠标的控制
		controls.rotateSpeed = 0.5;

动画效果

        requestAnimationFrame(animate); //循环调用函数
	    
				
        mesh.rotation.x += 0.01; //每帧网格模型的沿x轴旋转0.01弧度
        mesh.rotation.y += 0.02; //每帧网格模型的沿y轴旋转0.02弧度


        renderer.render( scene, camera ); //渲染界面

在执行动画时添加鼠标控制

  controls.update()

我的代码

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <title>Three.js</title>
    <style>
        body {
            margin: 0;
        }

        canvas {
            width: 100%;
            height: 100%;
            display: block;
        }
    </style>
</head>
<body onload="init()">

<script src="js/three.js"></script>
<script src="js/TrackballControls.js"></script>

<script>

    //声明一些全局变量
    var renderer, camera, scene, geometry, material, mesh,controls;
       //初始化渲染器
    function initRenderer() {
        renderer = new THREE.WebGLRenderer(); //实例化渲染器
        renderer.setSize(window.innerWidth, window.innerHeight); //设置宽和高
        document.body.appendChild(renderer.domElement); //添加到dom
         renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色

    }


    //初始化场景
    function initScene() {
        scene = new THREE.Scene(); //实例化场景
         
    }

    //初始化相机
    function initCamera() {
        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200); //实例化相机
        controls = new THREE.TrackballControls( camera, renderer.domElement ); //鼠标的控制
		controls.rotateSpeed = 0.5;
        camera.position.set(0, 0, 15);

    }
     var sphereMaterial
    //创建模型
    function initMesh() {
        geometry = new THREE.BoxGeometry( 2, 2, 2 ); //创建几何体
        material = new THREE.MeshNormalMaterial(); //创建材质

        mesh = new THREE.Mesh( geometry, material ); //创建网格
        scene.add( mesh ); //将网格添加到场景
    }


    //运行动画
    function animate() {
        requestAnimationFrame(animate); //循环调用函数
	    
				
        mesh.rotation.x += 0.01; //每帧网格模型的沿x轴旋转0.01弧度
        mesh.rotation.y += 0.02; //每帧网格模型的沿y轴旋转0.02弧度

	    controls.update()
        renderer.render( scene, camera ); //渲染界面
    }

    //初始化函数，页面加载完成是调用
    function init() {
        initRenderer();
        initScene();
        initCamera();
        initMesh();

        animate();
    }
</script>
</body>
</html>