当前位置：网站首页>【threejs】threesjs 初学场景构建

【threejs】threesjs 初学场景构建

2023-01-19 15:15:56【章井】

实现代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>My first three.js app</title>
		<style>
			body {
     margin: 0; }
		</style>
	</head>
	<body>
		<script src="./index_script/index_script_three.js"></script>
		<script>
			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 geometry = new THREE.BoxGeometry( 2, 2, 2 );
            const material = new THREE.MeshBasicMaterial( {
     color: 0xe4e4e4 } );
            const cube = new THREE.Mesh( geometry, material );
            scene.add( cube );
            camera.position.z = 5;
            function animate() {
    
                requestAnimationFrame( animate );
                renderer.render( scene, camera );
                cube.rotation.x += 0.01;
                cube.rotation.y += 0.01;
            }
            animate();
		</script>
	</body>
</html>

实现效果

在网页中实现旋转立方体

在这里插入图片描述

three.js 文件

https://threejs.org/build/three.js

原网站

版权声明
本文为[章井]所创，转载请带上原文链接，感谢
https://blog.csdn.net/m0_50939789/article/details/128731255

边栏推荐

猜你喜欢

随机推荐