最近在看three.js,每一步练习的时候用到的代码都记录一下,方便复习。第一个是最简单的球体,代码和效果如下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Three.js</title>
<style>
*{
margin:0;
padding:0;
}
canvas{
width:100%;
height: 100%;
}
</style>
<script src='https://cdn.bootcss.com/three.js/91/three.min.js'></script>
</head>
<body>
<script>
//创建场景
var scene=new THREE.Scene();
//创建透视投影相机,视角45度,画幅比例 宽比高,近平面距离0.1,远平面1000
var camera=new THREE.PerspectiveCamera(60,window.innerWidth/window.innerHeight,0.1,1000);
//创建渲染器
var renderer=new THREE.WebGLRenderer();
//渲染器canvas宽高设为与窗口一致
renderer.setSize(window.innerWidth,window.innerHeight);
//将渲染器对应的dom元素添加到body中
documen