程序员开发实例大全宝库

网站首页 > 编程文章 正文

如何在threejs中把两个东西合成一个整体

zazugpt 2024-10-24 19:28:30 编程文章 21 ℃ 0 评论

<!DOCTYPE html>

<html>

<head>

<title></title>

<style>canvas { width: 100%; height: 100% }</style>

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

</head>

<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(); /// 创建渲染器

var ob = new THREE.Object3D() // 创建一个ob类

renderer.setSize(window.innerWidth, window.innerHeight); // 设置渲染尺寸


document.body.appendChild(renderer.domElement); // 渲染结果添加到网页


var geometry = new THREE.CubeGeometry(1,1,1); // 创建一个盒模型

var material = new THREE.MeshBasicMaterial({color: 0x00ff00}); // 创建材质

var cube = new THREE.Mesh(geometry, material); // 创建立方体


ob.add(cube) // 立方体添加到ob类中

// scene.add(cube); // 立方体添加到场景中

var axishelper = new THREE.AxisHelper(5) // 创建坐标系

// scene.add(axishelper) // 场景中添加坐标系


ob.add(axishelper) // ob类中添加坐标系

scene.add(ob) // 场景中添加ob类

camera.position.z = 5; // 摄像机的z坐标=5 就是正对物体后退5步

camera.position.x = 0; // 摄像机的x坐标=0 就是正对物体左移0步

// camera.lookAt(0, 0, 0) // 摄像机看向000的位置， 这是默认值可以不要

function render() { // 定义渲染函数 循环调用加载动画

requestAnimationFrame(render); // 循环调用渲染函数

// cube.rotation.x += 0.01;

ob.rotation.y += 0.01; // ob类也就是方块和坐标系的结合体沿y轴旋转

// cube.rotation.z = 6.29;

// console.log(cube.rotation.z)/

renderer.render(scene, camera); // 渲染场景和摄像机

}

render();

</script>

</body>

</html>

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表