ThreeJS从实战到源码 - 创建场景

最新推荐文章于 2024-06-05 09:29:39 发布

Lucio_cn

最新推荐文章于 2024-06-05 09:29:39 发布

阅读量1.5w

点赞数

分类专栏： ThreeJS 文章标签： three.js

本文链接：https://blog.csdn.net/lizhipeng123321/article/details/120221884

版权

本文会从实战到源码进行一些简单例子的讲解，让你理论实战通通掌握。

搭建场景

先写一个载体文件，用于承载整个资源的html。

我们需要以下对象:scene, camera和renderer，这样我们就可以通过camera渲染场景。

直接写出：

<!DOCTYPE html>
<html>
	<head>
		<meta charset=utf-8>
		<title>创建一个简单的ThreeJS场景</title>
		<style>
			body { margin: 0; }
			#mainCanvas { width: 100%; height: 100% }
		</style>
	</head>
	<body>
        <div id="mainCanvas"></div>
		<script src="js/three.js"></script>
		<script>
			var scene = new THREE.Scene();
            var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );

            var renderer = new THREE.WebGLRenderer();
            renderer.setSize( window.innerWidth, window.innerHeight );
            document.querySelector('#mainCanvas').