threejs创建一个草地可以鼠标转动

没有天赋的搬砖者

已于 2023-10-19 08:43:16 修改

阅读量110

点赞数

分类专栏： threedemo 文章标签： javascript 前端开发语言

于 2023-10-18 17:09:08 首次发布

本文链接：https://blog.csdn.net/sdad2154/article/details/133910499

版权

threedemo 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<template>
<!--    <canvas id="c" style="width: 100%;height: 100%"></canvas>-->
</template>

<script setup>
import * as THREE from 'three';
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import {onMounted} from "vue";
import {PlaneGeometry} from "three";

onMounted(()=>{
    main()
})
let renderer,camera,scene,cube
const main = () => {
    scene = new THREE.Scene()

    renderer = new THREE.WebGLRenderer()
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement)
    camera = new THREE.PerspectiveCamera(40,2,0.1,1000)
    camera.position.z = 20
    // camera.lookAt(0,1,1)

    const color = 0xFFFFFF;
    const intensity = 5;
    const light = new THREE.DirectionalLight( color, intensity );
    light.position.set( - 1, 2, 4 );//目前还没搞清楚这个
    scene.add( light );


    // 草地集合体
    let groundGeometry = new PlaneGeometry(10,10)
//     贴图
    let groundTexture = new THREE.TextureLoader().load('/grassland.png')
    groundTexture.wrapS = groundTexture.wrapT = THREE.RepeatWrapping //groundTexture.wrapS和groundTexture.wrapT 水平垂直重复
    groundTexture.repeat.set(10,10)
    groundTexture.anisotropy = 1 
    const groundMaterial = new THREE.MeshLambertMaterial({   //生成贴图的材质
        map: groundTexture
    })
     cube = new THREE.Mesh( groundGeometry, groundMaterial )
    const controls = new OrbitControls(camera, renderer.domElement); //添加这一行可以鼠标转动页面上生成的mesh
    scene.add(cube)
    requestAnimationFrame(render)
}

const render = (time) => {
    time *= 0.001;  // 将时间单位变为秒
    // cube.rotation.x = time;
    // cube.rotation.y = time;
    renderer.render(scene, camera);

    requestAnimationFrame(render);
}



</script>

<style lang="scss" scoped>

</style>