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

[复制链接]
查看: 236   回复: 0     threejs基础教程

296

主题

296

帖子

1633

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1633
2024-6-21 05:59:09   显示全部楼层   阅读模式  
封面 2_02216.jpg

教程: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, 下载次数: 4

下载





源代码:


<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>




threejs美术大师课程
回复

使用道具 举报

您需要登录后才可以回帖   登录 立即注册

高级模式

南通谢凡软件科技有限公司