5 threejs对象的移动旋转缩放 PSR,threejs模型的位置旋转缩放

xiefandaren · 2024-6-21 05:59:09

教程：https://www.bilibili.com/video/B ... id_from=333.999.0.0

效果

开发文档链接https://xiefansq.cn/threejsP/202 ... pi/zh/core/Object3D

位置

cube3.position.x+=-2

旋转

 cube2.rotation.y=Math.PI/180*-30

缩放

cube3.scale.set(1.2,1.8,0.3)

工程源码文件：

5 threejs对象的移动旋转缩放 PSR.zip免费

2024-6-21 05:58上传, 251.06 KB, 下载次数: 89

下载

源代码：

<html lang="en">

<head>
    <meta charset="utf-8">
    <title>相机控制权限解锁</title>
    <style>
        body {
            margin: 0;
        }
    </style>
</head>

<body>
    <script type="module">
        import * as THREE from './three.module.js';
        import { OrbitControls } from './OrbitControls.js';

        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
        const controls = new OrbitControls( camera, renderer.domElement );

    

        const geometry = new THREE.BoxGeometry(1, 1, 1);
        const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
        const cube = new THREE.Mesh(geometry, material);
        scene.add(cube);
 
         const cube1=cube.clone()
         cube1.position.x+=5
         scene.add(cube1)

         const cube2=cube.clone()
         cube2.material=cube.material.clone()
         cube2.position.y+=2
         scene.add(cube2)
         cube2.material.color=new THREE.Color( 0xFF0037 );
         cube2.rotation.y=Math.PI/180*-30


         const cube3=cube.clone()
         cube3.material=cube.material.clone()
         cube3.position.x+=-2
         scene.add(cube3)
         cube3.material.color=new THREE.Color( 0xFFF200 );
         cube3.scale.set(1.2,1.8,0.3)

        
        camera.position.z = 5;

        function animate() {
            requestAnimationFrame(animate);
            // cube.rotation.x += 0.01;
            // cube.rotation.y += 0.01;
            renderer.render(scene, camera);
            controls.update();
        }
        animate();
    </script>
</body>

</html>