threejs实现三维分层可转动图层显示效果代码

代码语言:html

所属分类:三维

代码描述:threejs实现三维分层可转动图层显示效果代码

代码标签: three 三维 分层 转动 图层

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <style>
        body {
        				background-color: #ffffff;
        				margin: 0;
        				overflow: hidden;
        			}
    </style>

</head>

<body>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three-min.js"></script>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TrackballControls.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/CSS3DRenderer.js"></script>

    <script>
        var camera, scene, renderer;
        			var geometry, material, mesh;
        
        			var scene2, renderer2;
        
        			var controls;
        
        			init();
        			animate();
        
        			function init() {
        
        				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
        				camera.position.set( 500, 100, 100 );
        
        				controls = new THREE.TrackballControls( camera );
        
        				controls.rotateSpeed = 1.0;
        				controls.zoomSpeed = 1.2;
        				controls.panSpeed = 0.8;
        
        				controls.noZoom = false;
        				controls.noPan = false;
        
        				controls.staticMoving = false;
        				controls.dynamicDampingFactor = 0.3;
        
        				controls.keys = [ 70, 90, 75 ];
        
        				scene = new THREE.Scene();
        
        				geometry = new THREE.CubeGeometry( 200,200, 200 );
        				material = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, wireframeLinewi.........完整代码请登录后点击上方下载按钮下载查看

网友评论0