threejs入门示例

最新推荐文章于 2024-05-16 18:44:20 发布

启明星在这里

最新推荐文章于 2024-05-16 18:44:20 发布

阅读量198

点赞数

分类专栏： threejs

本文链接：https://blog.csdn.net/lf_morning/article/details/126075929

版权

three.js WebGL 3D渲染方块 JavaScript

关键词由CSDN通过智能技术生成

threejs 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1. 渲染一个方块

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<title>three.js</title>
	</head>
	<body>
		<div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a></div>
		<script type="module">
            import * as THREE from 'https://cdn.skypack.dev/three@0.137.0';
            // 场景
            const scene = new THREE.Scene();
            init()
            function init(){
                // render
                let renderer = new THREE.WebGLRenderer();
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
				document.body.appendChild( renderer.domElement );
                // 透视相机
                let camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 200 );
                // 相机位置
				camera.position.set( 0, 0, 10 );
                // 物体
                let line = new THREE.Mesh(
                    INIT_GEOMETRY(), // 几何体
                    INIT_MATERIAL() // 材质
                )
                // 把物体添加到场景中
                scene.add(line)
                renderer.render( scene, camera );
            }

            function INIT_GEOMETRY(){
                return new THREE.PlaneGeometry( 1, 1 );
            }

            function INIT_MATERIAL () {
                return new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} )
            }
	</script>
	</body>
</html>