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

<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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值