基于threejs 搭建web 3D 简单编辑器

<!DOCTYPE html>
<html lang="en"><head><title>智雨物联</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"><style>body {font-family: Monospace;background-color: #f0f0f0;margin: 0px;overflow: hidden;}#oldie { background-color: #ddd !important }</style></head><body oncontextmenu="return false"><div style="position: fixed;top:5%;right:1%;width:10%;height:500px;background: #6699ff;color: #000000"><button onclick="empty()" type="button" style="width:100%;height:50px;">鼠标</button><button onclick="cube()" type="button" style="width:100%;height:50px;">矩形</button><button onclick="Sphere()" type="button" style="width:100%;height:50px;">圆形</button></div><script src="js/three.js"></script><script src="js/controls/OrbitControls.js"></script><script src="js/Detector.js"></script><script>if ( ! Detector.webgl ) Detector.addGetWebGLMessage();//容器  变量var container;//照相机、场景、控制、渲染器  变量var camera, scene,controls,renderer;//平面 立方体 变量var plane, cube;//鼠标 光线投射 shift键 变量var mouse, raycaster, isShiftDown = false;//选取物体轮廓 材质 变量var rollOverMesh, rollOverMaterial;//立方体 高度 材质 变量var cubeGeo, cubeMaterial;//obj数组var objects = [];//初始化init();//传递函数render();function init() {//容器位置divcontainer = document.createElement( 'div' );//body加载容器document.body.appendChild( container );//div属性var info = document.createElement( 'div' );info.style.position = 'absolute';info.style.top = '10px';info.style.width = '100%';info.style.textAlign = 'center';info.innerHTML = '<a href="http://www.krmes.com" target="_blank">IMR-3D Desinger</a>';//属性加载container.appendChild( info );//照相机家里并设定属性//距离camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );//位置位置camera.position.set( 400, 1300, 2300 );camera.lookAt( new THREE.Vector3() );//建立场景scene = new THREE.Scene();// roll-over helpers//轮廓大小rollOverGeo = new THREE.BoxGeometry( 50, 50, 50 );//材质rollOverMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000, opacity: 0.5, transparent: true } );//加载 轮廓 材质rollOverMesh = new THREE.Mesh( rollOverGeo, rollOverMaterial );//加入到场景scene.add( rollOverMesh );// obj 模型//模型 大小objGeo = new THREE.BoxGeometry( 50, 50, 50 );//模型 材质objMaterial = new THREE.MeshLambertMaterial( { color: 0xfeb74c } ); //, map: new THREE.TextureLoader().load( "textures/square-outline-textured.png" )// grid//网格 大小 步长var size = 1500, step = 100;//几何函数var geometry = new THREE.Geometry();//几何算法完成  复制for ( var i = - size; i <= size; i += step ) {geometry.vertices.push( new THREE.Vector3( - size, 0, i ) );geometry.vertices.push( new THREE.Vector3(   size, 0, i ) );geometry.vertices.push( new THREE.Vector3( i, 0, - size ) );geometry.vertices.push( new THREE.Vector3( i, 0,   size ) );}//材质var material = new THREE.LineBasicMaterial( { color: 0xa4c2f4, opacity: 1, transparent: true } );//加载 大小 材质var line = new THREE.LineSegments( geometry, material );//加载 到场景scene.add( line );//投射raycaster = new THREE.Raycaster();//鼠标 2维函数mouse = new THREE.Vector2();//几何缓存 var geometry = new THREE.PlaneBufferGeometry( 1000, 1000 );//算法geometry.rotateX( - Math.PI / 2 );//面plane = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { visible: false } ) );//加载 到场景scene.add( plane );//数组加载objects.push( plane );// Lights//环境灯光var ambientLight = new THREE.AmbientLight( 0x606060 );//加载 灯光scene.add( ambientLight );//定向 灯光var directionalLight = new THREE.DirectionalLight( 0xffffff );directionalLight.position.set( 1, 0.75, 0.5 ).normalize();scene.add( directionalLight );//渲染renderer = new THREE.WebGLRenderer( { antialias: true } );renderer.setClearColor( 0xf0f0f0 );renderer.setPixelRatio( window.devicePixelRatio );renderer.setSize( window.innerWidth, window.innerHeight );container.appendChild( renderer.domElement );// 视图控制 controls = new THREE.OrbitControls( camera, renderer.domElement );controls.zoomSpeed = 2;//鼠标事件监听document.addEventListener( 'mousemove', onDocumentMouseMove, false );document.addEventListener( 'mousedown', onDocumentMouseDown, false );document.addEventListener( 'keydown', onDocumentKeyDown, false );document.addEventListener( 'keyup', onDocumentKeyUp, false );////窗口监听window.addEventListener( 'resize', onWindowResize, false );}//窗口函数function onWindowResize() {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize( window.innerWidth, window.innerHeight );}//鼠标移动事件 函数function onDocumentMouseMove( event ) {event.preventDefault();mouse.set( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1 );raycaster.setFromCamera( mouse, camera );var intersects = raycaster.intersectObjects( objects );if( rollOverMesh == null) {}else{if ( intersects.length > 0 ) {var intersect = intersects[ 0 ];rollOverMesh.position.copy( intersect.point ).add( intersect.face.normal );rollOverMesh.position.divideScalar( 50 ).floor().multiplyScalar( 50 ).addScalar( 25 );}render();}}//鼠标 点击事件 函数function onDocumentMouseDown( event ) {//鼠标事件event.preventDefault();mouse.set( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1 );raycaster.setFromCamera( mouse, camera );var intersects = raycaster.intersectObjects( objects );if( event.button == 2) {//删除原有的形状  scene.remove( rollOverMesh );//延时清空objsetTimeout("objempty()",500);}if( event.button == 0){//轮廓不为空时if( objGeo != null) {if ( intersects.length > 0 ) {var intersect = intersects[ 0 ];// delete cubeif ( isShiftDown ) {if ( intersect.object != plane ) {scene.remove( intersect.object );objects.splice( objects.indexOf( intersect.object ), 1 );}// create cube} else {var voxel = new THREE.Mesh( objGeo, objMaterial );voxel.position.copy( intersect.point ).add( intersect.face.normal );voxel.position.divideScalar( 50 ).floor().multiplyScalar( 50 ).addScalar( 25 );scene.add( voxel );objects.push( voxel );}render();}}}}//键盘keydown事件函数function onDocumentKeyDown( event ) {switch( event.keyCode ) {case 16: isShiftDown = true; break;}}//键盘keyup事件函数function onDocumentKeyUp( event ) {switch ( event.keyCode ) {case 16: isShiftDown = false; break;}}//传递函数function render() {renderer.render( scene, camera );}//空function empty(){//删除原有的形状  scene.remove( rollOverMesh );//延时清空objsetTimeout("objempty()",500);}//空 清空objfunction objempty(){//轮廓大小rollOverGeo      = new THREE.BoxGeometry( 50, 50, 50 );//材质rollOverMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000, opacity: 0.5, transparent: true } );//加载 轮廓 材质rollOverMesh     = new THREE.Mesh( rollOverGeo, rollOverMaterial );// obj 模型//模型 大小objGeo = null;//模型 材质objMaterial = null;}//矩形function cube(){//删除原有的形状 scene.remove( rollOverMesh );//轮廓大小rollOverGeo      = new THREE.BoxGeometry( 50, 50, 50 );//材质rollOverMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000, opacity: 0.5, transparent: true } );//加载 轮廓 材质rollOverMesh     = new THREE.Mesh( rollOverGeo, rollOverMaterial );//加入到场景scene.add( rollOverMesh );// obj 模型//模型 大小objGeo = new THREE.BoxGeometry( 50, 50, 50 );//模型 材质objMaterial = new THREE.MeshLambertMaterial( { color: 0xfeb74c } ); //, map: new THREE.TextureLoader().load( "textures/square-outline-textured.png" )}//球体function Sphere(){//删除原有的形状 scene.remove( rollOverMesh );//轮廓大小rollOverGeo      = new THREE.SphereGeometry( 50, 50, 50 );//材质rollOverMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000, opacity: 0.5, transparent: true } );//加载 轮廓 材质rollOverMesh     = new THREE.Mesh( rollOverGeo, rollOverMaterial );//加入到场景scene.add( rollOverMesh );// obj 模型//模型 大小objGeo = new THREE.SphereGeometry( 50, 50, 50 );//模型 材质objMaterial = new THREE.MeshLambertMaterial( { color: 0xfeb74c } ); //, map: new THREE.TextureLoader().load( "textures/square-outline-textured.png" )}</script></body>
</html>

基于threejs 搭建web 3D 简单编辑器相关推荐

基于threejs(webgl)的3D元宇宙云展厅
首先看看效果图: 基于 threejs 的 3D 展厅基于 threejs 开发的 3D 展厅,展品可以自由摆放.支持 gltf/glb 格式 github地址:GitHub - mtsee/vr- ...
基于threejs + CSS3DRenderer的3D全景
基于threejs + CSS3DRenderer的3D全景可以理解为将相机置放在一个立方体内,调整相机的位置可以拍摄到场景中不同内容.本篇是通过CSS3DRenderer来实现全景浏览,分别铺满一 ...
基于HT for Web 3D呈现Box2DJS物理引擎
为什么80%的码农都做不了架构师?>>> 上篇我们基于HT for Web呈现了A* Search Algorithm的3D寻路效果,这篇我们将采用HT for Web 3D来 ...
基于Threejs构建的3D立体空间实战入门
在现实生活中,我们有许多场景需要对真实世界进行还原,仿真.因此会有很多3D的展示需求,同时要求可以基于浏览器就可以深度交互浏览.这里关于3D方面的内容不进行赘述,同时关于opengl和webgl的发展 ...
html5游戏开发box2djs,基于HT for Web 3D呈现Box2DJS物理引擎
上篇我们基于HT for Web呈现了A* Search Algorithm的3D寻路效果,这篇我们将采用HT for Web 3D来呈现Box2DJS物理引擎的碰撞效果,同上篇其实Box2DJS只是 ...
基于Linux搭建Web网站
网站需求: 1.基于域名[www.openlab.com](http://www.openlab.com)可以访问网站内容为 welcome to openlab!!! 2.给该公司创建三个子界面分别 ...
基于Threejs的jQuery 3d图片旋转木马特效插件
这是一款基于ThreeJS的炫酷3D旋转木马图片画廊特效插件.该旋转木马特效可以设置图片预加载,带有前后导航按钮,可以使用鼠标前后旋转,并可以设置3D透视的位置. 浏览器兼容: Firefox - 3 ...
教你如何使用blender+threejs搭建一个3d展厅平台 | 大帅老猿threejs特训
效果图页面预览链接(服务器配置比较低,加载视频会比较慢,请耐心等候):https://static-8f957b23-c692-40ef-8f26-0a8a8e5422f1.bspapp.com/i ...
java购物车jsp 代码,基于JSP java web Sql 简单的购物车源代码
[实例简介] java 简单购物车 JSP Servlet JAVAbeenjavaee 简单购物车 [实例截图] [核心代码] medicineStore2 └── medicineStore2 ...

基于threejs 搭建web 3D 简单编辑器

基于threejs 搭建web 3D 简单编辑器相关推荐

最新文章

热门文章