three绘制一个三维铁塔效果代码
代码语言:html
所属分类:三维
代码描述:three绘制一个三维铁塔效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
margin: 0;
background-image: radial-gradient(ellipse at left, #000000, #000000), radial-gradient(ellipse at right, #000000, #000000);
}
</style>
</head>
<body>
<div id="myCanvas"></div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.126.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.126.js"></script>
<script>
'use strict';
/**
* default
**/
let scene = null,
camera = null,
renderer = null,
controls = null,
tokyotower = null,
width = 0,
height = 0;
/**
* init
**/
function init() {
width = window.innerWidth,
height = window.innerHeight;
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(45, width / height);
camera.position.set(0, 160, 1500);
renderer = new THREE.WebGLRenderer({
alpha: true });
renderer.setPixelRatio(
window.devicePixelRatio);
renderer.setSize(width, height);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
controls = new THREE.OrbitControls(camera, renderer.domElement);
addLights();
drawTokyotower();
document.getElementById('myCanvas').appendChild(renderer.domElement);
window.addEventListener('resize', onResize, false);
}
/**
* lights
**/
function addLights() {
const directLight1 = new THREE.DirectionalLight(0xffffff);
directLight1.castShadow = true;
directLight1.position.set(0, 1, 1);
scene.add(directLight1);
.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0