<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Three.js</title>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<script type="text/javascript" src="three.js"></script>
<script src="OrbitControls.js"></script>
<script>
let wev = {};
</script>
<script src="bezier.js"></script>
<script src="Trail.js"></script>
<script>
var renderer, scene, camera;
var mouse;
var controls ;
let guideLine;
function init() {
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setClearColor(0xF1F2F7);
renderer.setSize(window.innerWidth, window.innerHeight);
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xF1F2F7 );
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.lookAt(new THREE.Vector3(20, 0, 20));
camera.position.set(0, 40, 50);
// 光线的照射
var ambiColor = "#f2f2f2";
var spotLight = new THREE.SpotLight(ambiColor);
spotLight.position.set( -100, 100, -100);
scene.add(spotLight);
var spotLight2 = new THREE.SpotLight(ambiColor);
spotLight2.position.set( 100, 100, 150);
scene.add(spotLight2);
controls = new THREE.OrbitControls( camera,renderer.domElement )
document.body.appendChild(renderer.domElement);
addTrail();
render();
}
function addTrail(){
let map = {};
map.getResolution = function(){
let target = controls.target, cameraPosition = camera.position,
dist = new THREE.Vector3().subVectors( target, cameraPosition ).length();
let fov = camera.fov;
let realHeight = Math.tan(Math.PI*fov/(180*2))*dist*2;
return realHeight/ window.innerHeight;
}
map.container = document.body;
map.scene = scene;
/**
* trail
* .start() 开始动画
* .stop() 结束动画
*/
guideLine = new wev.overlay.Trail({
positions:[[1,0,1],[5,0,5],[5,0,1]], //以xz轴为平面
width:10, //线宽
placeLength:15, //图标放置的长度
placeSpace:10, //图标放置间隔
iconUrl:"arrow.png", //图标
speed:2, //速度
isAnimate:true //是否需要动画
})
guideLine.addToMap(map);
}
function render() {
controls.update();
if(guideLine){
guideLine.update();
}
requestAnimationFrame(render);
renderer.render(scene, camera);
}
init();
</script>
</body>
</html>
three.js符号线动画
版权申诉
5星 · 超过95%的资源 6 浏览量
2022-04-23
23:34:08
上传
评论 1
收藏 195KB RAR 举报 
trail-debug-new.rar （6个子文件） 
trail.html 3KB
three.js 1.05MB Trail.js 12KB
arrow.png 3KB bezier.js 1KB OrbitControls.js 22KB
evomap
- 粉丝: 482
- 资源: 15
- 1
- 2
- 3
- 4
前往页