用threejs 实现3D物体在浏览器展示，通过鼠标平移，缩放，键盘箭头按钮左右移动等功能展示。

<!DOCTYPE html>

<html>

<head>

<meta charset=utf->

<title>My first three.js app</title>

<style>

* { margin: ; }

canvas { width: %; height: %;}

</style>

</head>

<body>

</body>

<script src="https://cdn.bootcss.com/three.js/91/three.js"></script>

<script>

var iswireframe = false;

var scene , camera , renderer;

var fov = , //拍摄距离  视野角值越大，场景中的物体越小

    near = ,//相机离视体积最近的距离

        far = ;//相机离视体积最远的距离;

var cameraX = , cameraY = , cameraZ = ;

var sceneX = , sceneZ = ;

document.body.style.cursor="move";

function initFloor(){

var floorGeometry = new THREE.BoxGeometry( , 0.01, );

//var material = new THREE.MeshBasicMaterial( { color: "green", wireframe : iswireframe } );

for ( var i = ; i < floorGeometry.faces.length; i++ ) {

floorGeometry.faces[ i ].color.set( 0xEEEED1 );

}

var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.FaceColors, wireframe : iswireframe } );

var floor = new THREE.Mesh( floorGeometry, material );

scene.add( floor );

}

function initGrid(){ //辅助网格

var helper = new THREE.GridHelper( ,  );

//helper.setColors( 0x0000ff, 0x808080 );

scene.add( helper );

}

function initBuild1(){

var buildingGeometry1 = new THREE.BoxGeometry(, , );

for ( var i = ; i < buildingGeometry1.faces.length; i++ ) {

buildingGeometry1.faces[i].color.setHex( Math.random() * 0xffffff );

}

var  building1 = new THREE.Mesh(

buildingGeometry1,

new THREE.MeshBasicMaterial({vertexColors: THREE.FaceColors, wireframe : iswireframe})

);

building1.position.set(, , );

scene.add(building1);

}

function buildColor(geometry){

for ( let i = ; i < geometry.faces.length; i++ ) {

geometry.faces[i].color.setHex( Math.random() * 0xffffff );

}

}

function initWall(){

let wallColor = 0xEBEBEB;

let wallHeight = ;

let wallGeometryback = new THREE.BoxGeometry(, wallHeight, 0.1);

console.log(wallGeometryback.faces.length);

//buildColor(wallGeometryback);

let materialParamertes =  {color: wallColor, vertexColors: THREE.FaceColors, wireframe : iswireframe, opacity : 0.01};

var  wallback = new THREE.Mesh(

wallGeometryback,

new THREE.MeshBasicMaterial(materialParamertes)

);

wallback.position.set(, 0.5, -);

scene.add(wallback);

let wallGeometryLeft = new THREE.BoxGeometry(0.1, wallHeight, );

var  wallLeft = new THREE.Mesh(

wallGeometryLeft,

new THREE.MeshBasicMaterial(materialParamertes)

);

wallLeft.position.set(-, 0.5, );

scene.add(wallLeft);

let wallGeometryRight = new THREE.BoxGeometry(0.1, wallHeight, );

var  wallRight = new THREE.Mesh(

wallGeometryRight,

new THREE.MeshBasicMaterial(materialParamertes)

);

wallRight.position.set(, 0.5, );

scene.add(wallRight);

/*

let wallGeometryFront = new THREE.BoxGeometry(20, wallHeight, 0.1);

var  wallFront = new THREE.Mesh(

wallGeometryFront,

new THREE.MeshBasicMaterial(materialParamertes)

);

wallFront.position.set(0, 0.5, 3);

scene.add(wallFront);

*/

}

function onDocumentKeyDown(event){

        switch(event.keyCode){

            case : //左

                cameraX -= ;

sceneX -=;

                break;

            case : //右

                cameraX += ;

sceneX +=;

                break;

            case : //上

                //fx -= 0.1;

                cameraZ -= ;

sceneZ -= ;

                break;

            case : //下

                //fx += 0.1;

                cameraZ += ;

sceneZ += ;

                break;

            default:

                break;

        }

renderInit();

    }

function onDocumentMouseWheel(event) {

   if (event.wheelDelta) {  //判断浏览器IE，谷歌滑轮事件

if (event.wheelDelta > ) { //当滑轮向上滚动时

fov -= (near < fov ?  : );

}

if (event.wheelDelta < ) { //当滑轮向下滚动时

fov += (fov < far ?  : );

}

} else if (event.detail) {  //Firefox滑轮事件

if (event.detail > ) { //当滑轮向上滚动时

fov += ;

}

if (event.detail < ) { //当滑轮向下滚动时

fov -= ;

}

}

//改变fov值，并更新场景的渲染

camera.fov = fov;

        renderInit();

    }

function onDocumentMouseDown(event) {

        if (event.button != ) return;

        event.preventDefault();

        document.addEventListener('mousemove', onDocumentMouseMove, false);

        document.addEventListener('mouseup', onDocumentMouseUp, false);

    }

    function onDocumentMouseMove(event) {

        var movementX = event.movementX || event.mozMovementX || event.webkitMovementX || ;

        var movementY = event.movementY || event.mozMovementY || event.webkitMovementY || ;

//console.log("x="+movementX+"   y="+movementY);

cameraX -= movementX * 0.01;

sceneX -= movementX * 0.01;

cameraZ -= movementY * 0.01;

sceneZ -= movementY * 0.01;

renderInit();

    }

    function onDocumentMouseUp(event) {

        document.removeEventListener('mousemove', onDocumentMouseMove);

        document.removeEventListener('mouseup', onDocumentMouseUp);

    }

//场景初始化

function sceneInit(){

scene = new THREE.Scene();

camera = new THREE.PerspectiveCamera( fov , window.innerWidth/window.innerHeight, near, far );

//camera.position.set(0, 0, 7);

//相机位置

//cameraX = 0; cameraZ = 8;

camera.up.x = ;

camera.up.y = ; //相机朝向--相机上方为y轴

camera.up.z = ;

renderer = new THREE.WebGLRenderer({antialias : true});

renderer.setSize( window.innerWidth - , window.innerHeight - );

renderer.setClearColor(0xFFFFFF, 1.0);

document.body.appendChild( renderer.domElement );

renderer.setClearColor(0xFFFFFF, 1.0);

document.addEventListener('keydown',onDocumentKeyDown,false);

document.addEventListener('mousewheel', onDocumentMouseWheel, false);//兼容ie chrome

document.addEventListener('DOMMouseScroll', onDocumentMouseWheel, false);//兼容火狐

document.addEventListener('mousedown', onDocumentMouseDown, false);

initGrid();

initFloor();

initBuild1();

initWall();

}

function renderInit(){

camera.position.set(cameraX, cameraY, cameraZ);

camera.lookAt(sceneX, , sceneZ);

camera.updateProjectionMatrix();

renderer.render(scene, camera);

}

sceneInit();

renderInit();

//动画

function animate() {

        requestAnimationFrame( animate );

      //  stats.begin();

        initAll();

        //stats.end();

    }

</script>

</html>

用threejs 实现3D物体在浏览器展示的更多相关文章

  1. 在threejs中对3D物体旋转的思考

    今天在写threejs时,突然想到一个问题:一个3D物体需要旋转时,一般情况下简单的旋转我都是使用欧拉角,稍微复杂一些的情况我会把欧拉角转换成四元数进行旋转(欧拉角复杂旋转可能会产生的死锁问题),但是 ...

  2. 转 threejs中3D视野的缩放实现

    Threejs基础部分学习知道透视相机new THREE.PerspectiveCamera(fov, aspect , near,far)中. fov视野角(拍摄距离)越大,场景中的物体越小.fov ...

  3. 3D图片采集与展示（SurfaceView 自适应 Camera, 录制视频， 抽取帧）

    最近在做一个3D图片采集与展示. 主要功能为:自定义Camera(google 已经摈弃了Camera, 推荐使用Camera2,后续篇幅,我将会用Camera2取代Camera),围绕一个物体360 ...

  4. 在ugui上显示3d物体

    1.接下来,使Cube的Layer和背景一样为UI层, 2.在将我们的主相机culling Mask改为UI,如果你还想渲染其他层的物体,可以根据需要该为需要的层,或者直接改为Everyting 3. ...

  5. Threejs 开发3D地图实践总结【转】

    Threejs 开发3D地图实践总结   前段时间连续上了一个月班,加班加点完成了一个3D攻坚项目.也算是由传统web转型到webgl图形学开发中,坑不少,做了一下总结分享. 1.法向量问题 法线是垂 ...

  6. [Unity官方文档翻译]Primitive and Placeholder Objects Unity原生3D物体教程

    Primitive and Placeholder Objects 原始的基础物体 Unity can work with 3D models of any shape that can be cre ...

  7. threejs和3d各种效果的学习

    写给即将开始threejs学习的自己,各种尝试,各种记忆.不要怕,灰色的年华终会过去. 一个技术学习的快慢,以及你的深刻程度,还有你的以后遇到这个东西的时候的反应速度,很大程度上,取决于你的博客的深刻 ...

  8. 教你如何利用threejs对3D模型皮肤进行DIY

    一步一步教你如何利用threejs加载gltf模型来实现DIY换肤功能. 模型准备 模型制作 模型可以通过网上下载,也可以自己通过c4d.maya.blender等模型制作软件得到.这里就不叙述有关模 ...

  9. HMS Core AR Engine 2D图片/3D物体跟踪技术 助力打造更智能AR交互体验

    AR技术已经被广泛应用于营销.教育.游戏.展览等场景.通过2D图像跟踪技术和3D物体跟踪技术,用户只需使用一台手机进行拍摄,即可实现海报.卡牌等平面物体以及文物.手办等立体物体的AR效果.尽管近年来2 ...

随机推荐

  1. 手机抓包HTTPS (Fiddler & Packet Capture)

    手机抓包HTTPS (Fiddler & Packet Capture) 以前写了一个小游戏(消灭病毒)的刷金币小脚本,使用需要获取openid ,就需要抓微信的HTTPS包 一直都是用Fid ...

  2. 2020年PHP 面试问题(三）

    2020年PHP 面试问题(一) 2020年PHP 面试问题(二) 一.数据库三范式 第一范式:1NF是对属性的原子性约束,要求属性具有原子性,不可再分解: 第二范式:2NF是对记录的惟一性约束,要求 ...

  3. NOI ONLINE 提高组 序列 根据性质建图

    题目链接 https://www.luogu.com.cn/problem/P6185 题意 应该不难懂,跳过 分析 说实话第一眼看到这题的时候我有点懵,真不知道怎么做,不过一看数据,还好还好,暴力能 ...

  4. PIGS POJ - 1149网络流（最短增广路---广搜） + 建图

    题意: 第一行输入m和n,m是猪圈的数量,n是顾客的数量,下面n行 第 i+1行表示第i个顾客 , 输入第一个数字表示有几把猪圈的钥匙,后面输入对应的猪圈,最后一个数字输入顾客想买几头猪. 建图: 设 ...

  5. Feign客户端的重构，新建springcloud架构

    1,在上篇博文中,已经实现了feign 客户端来远程调用接口的功能,因为feign 客户端在springcloud 开发过程中是比较常用的方式 https://www.cnblogs.com/pick ...

  6. 面试官：ThreadLocal的应用场景和注意事项有哪些？

    前言 ThreadLocal主要有如下2个作用 保证线程安全 在线程级别传递变量 保证线程安全 最近一个小伙伴把项目中封装的日期工具类用在多线程环境下居然出了问题,来看看怎么回事吧 日期转换的一个工具 ...

  7. CentOS忘记mariadb/mysql root密码解决办法

    本文不再更新,可能存在内容过时的情况,实时更新请访问原地址:CentOS忘记mariadb/mysql root密码解决办法: 这里有两种方式实现修改mariadb root密码. mariadb版本 ...

  8. 原生js焦点轮播图的实现

    继续学习打卡,武汉加油,逆战必胜!今日咱们主要探讨一下原生js写轮播图的问题, 简单解析一下思路: 1,首先写好css样式问题 2,考虑全局变量:自动播放的定时器,以及记录图片位置的角标Index 2 ...

  9. Blazor入门笔记（1）-从0构建一个组件

    1.环境 VS2019 16.5.1 .NET Core SDK 3.1.200 Blazor WebAssembly Templates 3.2.0-preview2.20160.5 2.创建项目 ...

  10. 牛客寒假基础集训营 | Day1 D-hanayo和米饭

    D-hanayo和米饭 题目描述 hanayo很喜欢吃米饭. 有一天,她拿出了 nnnnnnnnn 个碗,第一个碗装了 111111111 粒米饭,第二个碗装了 222222222 粒米饭,以此类推, ...