threejs实现360度天空中一只雄鹰三维模型fbx飞翔效果代码
代码语言:html
所属分类:三维
代码描述:threejs实现360度天空中一只雄鹰三维模型fbx飞翔效果代码
代码标签: threejs 三维 360 天空 雄鹰 飞翔 模型
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
body {
margin: 0;
}
#c {
width: 20%;
height: 20%;
display: block;
}
</style>
</head>
<body>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.126.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/inflate.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/FBXLoader.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.126.js"></script>
<canvas id="c"></canvas>
<script >
const canvas = document.querySelector('#c');
const renderer = new THREE.WebGLRenderer({ canvas });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const fov = 75;
const aspect = 2; // the canvas default
const near = 0.1;
const far = 100;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.z = 3;
const controls = new THREE.OrbitControls(camera, canvas);
controls.target.set(0, 0, 0);
controls.update();
const scene = new THREE.Scene();
{
const color = 0xFFFFFF;
const intensity = 2;
const light = new THREE.DirectionalLight(color, intensity);
light.position.set(10, 5, 5);
light.castShadow = true;
light.shadow.mapSize.width = 512; // default
light.shadow.mapSize.height = 512; // default
light.shadow.camera.near = 0.5; // default
light.shadow.camera.far = 500; // default
scene.add(light);
}
{
const keylight = new THREE.DirectionalLight(0xFFFFFF, 0.5);
keylight.position.set(0, 20, 0);
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0