threejs 8随机生成千个cube和点击选中模型

最新推荐文章于 2023-09-25 20:05:42 发布

Jessica巨人

最新推荐文章于 2023-09-25 20:05:42 发布

阅读量441

点赞数

分类专栏： threejs 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_34113388/article/details/120892588

版权

threejs 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

有滑动条和白边：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,body{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
</head>

<body>

</body>

</html>

效果：模型选中之后变红，点击选择其他的模型之后恢复原来的颜色
第一个实现：

/**
 * 一个基本的threejs例子
 */

import * as THREE from "three"
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
import { AmbientLight, AxesHelper, BoxBufferGeometry, DirectionalLight, HemisphereLight, Mesh, MeshPhongMaterial, SphereGeometry, TextureLoader } from "three";
import{FBXLoader}from "three/examples/jsm/loaders/FBXLoader"
import{MTLLoader} from "three/examples/jsm/loaders/MTLLoader"
import{OBJLoader}from "three/examples/jsm/loaders/OBJLoader"
import{GLTFLoader}from "three/examples/jsm/loaders/GLTFLoader"

var renderer = new THREE.WebGLRenderer({ antialias: true });
// renderer.domElement;//是一个canvas 可以从参数传入
document.body.appendChild(renderer.domElement);

renderer.setSize(window.innerWidth, window.innerHeight);//设置画布高宽
renderer.setClearColor(0xffffff);//设置背景清空颜色

window.addEventListener("resize", () => {//窗口大小变化事件
    renderer.setSize(window.innerWidth, window.innerHeight);
    camera.aspect = window.innerWidth / window.innerHeight;
    //设置了aspect  必须更新相机的投影矩阵
    camera.updateProjectionMatrix();
})

var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 2, 100)
var control = new OrbitControls(camera, renderer.domElement);
var scene = new THREE.Scene();

scene.background = new THREE.CubeTextureLoader()
    .setPath( "../assets/textures/cubeMaps/")
    .load( [
        'posx.jpg',
        'negx.jpg',
        'posy.jpg',
        'negy.jpg',
        'posz.jpg',   
        'negz.jpg'
    ] );


var dirLight=new DirectionalLight(0xffffff);
dirLight.intensity=5;

var light = new HemisphereLight(0xffffff, 0x444444);
scene.add(light);
scene.add(dirLight);

//-----------------------随机生成1000个立方体-----------------------------
var cubeGrometry=new BoxBufferGeometry(2,2,2);
for (let i = 0; i < 1000; i++) {
    //Math.random()生成一个0-1之间的随机数
    var mesh=new Mesh(cubeGrometry,new MeshPhongMaterial({color:0xffffff*Math.random()}))
    scene.add(mesh);
    mesh.position.set(300*Math.random()-50,300*Math.random()-50,300*Math.random()-50);
    mesh.scale.set(2*Math.random()+1,2*Math.random()+1,2*Math.random()+1);
    mesh.rotation.set(7*Math.random(),7*Math.random(),7*Math.random());
}
//---------------------------点击选中---------------------------------------
/*表示一条射线
Raycaster(origin?:THREE.vector3,direction?:THREE.Vector3,near?:number,far?:number)
*/
var raycaster=new THREE.Raycaster();
var coords=new THREE.Vector2(0,0);
var selectedMaterial=new MeshPhongMaterial({color:0xff0000});
var lastSelectModel=null;
window.addEventListener("pointerdown",(ev)=>{

    coords.x=(ev.clientX/window.innerWidth)*2-1;
    coords.y=-(ev.clientY/window.innerHeight)*2+1;
    // raycaster.setFromCamera({x:0,y:0},camera);
    raycaster.setFromCamera(coords,camera);
    var intersectObjects= raycaster.intersectObject(scene,true);
    if (intersectObjects.length>0) {
        //说明模型被选中
        var interObj=intersectObjects[0];
        var selectedmodel= interObj.object;
        selectedmodel.orgMaterial=selectedmodel.material;
        selectedmodel.material=selectedMaterial;
        // selectedmodel.material.emissive.set(0xff0000);
        if (lastSelectModel!==null&& lastSelectModel!==selectedMaterial) {
            lastSelectModel.material=lastSelectModel.orgMaterial;
        }
        lastSelectModel=selectedmodel;
    }
})
//-----------------------------------------------------------------------------------------------------
update()

function update() {
    console.log('刷新')
    renderer.render(scene, camera);
    requestAnimationFrame(update);//不会卡塞，专门针对图形渲染刷新的方法
}
//----------------------------------------模型加载------------------------------------------------------
var gltfLoader=new GLTFLoader();
gltfLoader.load("../assets/models/glTF/wuren.glb",(glb)=>{
glb.scene.x=-10;
// glb.scale.set(10,10,10);
    scene.add(glb.scene);
});

/**
 *练习一下点选
 */

import * as THREE from "three"
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
import { AmbientLight, AxesHelper, BoxBufferGeometry, Color, DirectionalLight, HemisphereLight, 
    Mesh, MeshPhongMaterial, Raycaster, SphereGeometry, TextureLoader } from "three";


var renderer = new THREE.WebGLRenderer({ antialias: true });
document.body.appendChild(renderer.domElement);

renderer.setSize(window.innerWidth, window.innerHeight);//设置画布高宽
renderer.setClearColor(0xffffff);//设置背景清空颜色

window.addEventListener("resize", () => {//窗口大小变化事件
    renderer.setSize(window.innerWidth, window.innerHeight);
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
})

var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 2, 100)
var control = new OrbitControls(camera, renderer.domElement);
var scene = new THREE.Scene();

scene.background = new THREE.CubeTextureLoader()
    .setPath( "../assets/textures/cubeMaps/")
    .load( [
        'posx.jpg',
        'negx.jpg',
        'posy.jpg',
        'negy.jpg',
        'posz.jpg',   
        'negz.jpg'
    ] );


var dirLight=new DirectionalLight(0xffffff);
dirLight.intensity=5;

var light = new HemisphereLight(0xffffff, 0x444444);
scene.add(light);
scene.add(dirLight);

//------------------------生成1000个随机立方体----------------------------------

var cubeGrometry=new BoxBufferGeometry(2,2,2);
for (let i = 0; index < 100; i++) 
{

    var mesh =new Mesh(cubeGrometry,new MeshPhongMaterial({color:0xffffff*Math.random()}));
    scene.add(mesh);

    mesh.position.set(300*Math.random()-50,300*Math.random()-50,300*Math.random()-50);
    mesh.scale.set(2*Math.random()+1,2*Math.random()+1,2*Math.random()+1);
    mesh.rotation.set(7*Math.random(),7*Math.random(),7*Math.random());  
}

//---------------------------点击选中START---------------------------------------

var raycaster = new THREE.Raycaster()
var mouse = new THREE.Vector2()

function onMouseClick(event){

    //将鼠标点击位置的屏幕坐标转换成threejs中的标准坐标

    mouse.x = (event.clientX / window.innerWidth) * 2 - 1
    mouse.y = (event.clientY/window.innerHeight) *2 + 1
 
    // 通过鼠标点的位置和当前相机的矩阵计算出raycaster
    raycaster.setFromCamera( mouse, camera );

    // 获取raycaster直线和所有模型相交的数组集合
    var intersects = raycaster.intersectObjects( scene.children );
    console.log(intersects);

     //将所有的相交的模型的颜色设置为红色
     for ( var i = 0; i < intersects.length; i++ ) {

            intersects[ i ].object.material.color.set( 0xff0000 );

        }
    }

window.addEventListener( 'click', onMouseClick, false );

//---------------------------选中部分END-----------------------------------------

update()

function update() {
    console.log('刷新')
    renderer.render(scene, camera);
    requestAnimationFrame(update);//不会卡塞，专门针对图形渲染刷新的方法
}
//-------------------------------------------------------------------------------

效果图：
在这里插入图片描述

Jessica巨人

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
threejs 8随机生成千个cube和点击选中模型

有滑动条和白边：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> html,bod
复制链接

扫一扫

专栏目录