Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Three.js基础

Three.js基础

作者头像
小刀c
发布于 2024-04-03 00:24:31
发布于 2024-04-03 00:24:31
48600
代码可运行
举报
文章被收录于专栏:cc logcc log
运行总次数:0
代码可运行

Intro

场景

场景基础

场景中显示东西,必要组件:

组件

说明

摄像机

决定屏幕上哪些东西需要渲染

光源

决定材质如何显示以及用于产生阴影

对象

摄像机透视图中主要的渲染兑现,如方块、球体

渲染器

webGL,webGPU等

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function init() {

    var stats = initStats();

    // create a scene, that will hold all our elements such as objects, cameras and lights.
    var scene = new THREE.Scene();

    // create a camera, which defines where we're looking at.
    var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100);

    // create a render and set the size
    var renderer = new THREE.WebGLRenderer();

    renderer.setClearColor(new THREE.Color(0x000000));
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMap.enabled = true;

    // create the ground plane
    var planeGeometry = new THREE.PlaneGeometry(60, 40, 1, 1);
    var planeMaterial = new THREE.MeshLambertMaterial({
        color: 0xffffff
    });
    var plane = new THREE.Mesh(planeGeometry, planeMaterial);
    plane.receiveShadow = true;

    // rotate and position the plane
    plane.rotation.x = -0.5 * Math.PI;
    plane.position.x = 0;
    plane.position.y = 0;
    plane.position.z = 0;

    // add the plane to the scene
    scene.add(plane);

    // position and point the camera to the center of the scene
    camera.position.x = -30;
    camera.position.y = 40;
    camera.position.z = 30;
    camera.lookAt(scene.position);

    // add subtle ambient lighting
    var ambientLight = new THREE.AmbientLight(0x3c3c3c);
    scene.add(ambientLight);

    // add spotlight for the shadows
    var spotLight = new THREE.SpotLight(0xffffff, 1.2, 150, 120);
    spotLight.position.set(-40, 60, -10);
    spotLight.castShadow = true;
    scene.add(spotLight);

    // add the output of the renderer to the html element
    document.getElementById("webgl-output").appendChild(renderer.domElement);

    // call the render function
    var step = 0;

    var controls = new function () {
        this.rotationSpeed = 0.02;
        this.numberOfObjects = scene.children.length;

        this.removeCube = function () {
            var allChildren = scene.children;
            var lastObject = allChildren[allChildren.length - 1];
            if (lastObject instanceof THREE.Mesh) {
                scene.remove(lastObject);
                this.numberOfObjects = scene.children.length;
            }
        };

        this.addCube = function () {

            var cubeSize = Math.ceil((Math.random() * 3));
            var cubeGeometry = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize);
            var cubeMaterial = new THREE.MeshLambertMaterial({
                color: Math.random() * 0xffffff
            });
            var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
            cube.castShadow = true;
            cube.name = "cube-" + scene.children.length;


            // position the cube randomly in the scene

            cube.position.x = -30 + Math.round((Math.random() * planeGeometry.parameters.width));
            cube.position.y = Math.round((Math.random() * 5));
            cube.position.z = -20 + Math.round((Math.random() * planeGeometry.parameters.height));

            // add the cube to the scene
            scene.add(cube);
            this.numberOfObjects = scene.children.length;
        };

        this.outputObjects = function () {
            console.log(scene.children);
        }
    };

    var gui = new dat.GUI();
    gui.add(controls, 'rotationSpeed', 0, 0.5);
    gui.add(controls, 'addCube');
    gui.add(controls, 'removeCube');
    gui.add(controls, 'outputObjects');
    gui.add(controls, 'numberOfObjects').listen();

    // attach them here, since appendChild needs to be called first
    var trackballControls = initTrackballControls(camera, renderer);
    var clock = new THREE.Clock();

    render();
    
    function render() {

        trackballControls.update(clock.getDelta());
        stats.update();

        // rotate the cubes around its axes
        scene.traverse(function (e) {
            if (e instanceof THREE.Mesh && e != plane) {
                e.rotation.x += controls.rotationSpeed;
                e.rotation.y += controls.rotationSpeed;
                e.rotation.z += controls.rotationSpeed;
            }
        });

        // render using requestAnimationFrame
        requestAnimationFrame(render);
        renderer.render(scene, camera);
    }
}
  • scene.add 场景中添加对象
  • scene.remote 场景中移除对象
  • scene.children 获取场景中对象
  • scene.getObjectByName 根据name获取场景中对象。
  • scene.traverse 传入回调函数,便利场景中每个对象。

场景雾化效果

show code

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function init() {

    var stats = initStats();

    // create a scene, that will hold all our elements such as objects, cameras and lights.
    var scene = new THREE.Scene();
    // scene.fog = new THREE.FogExp2(0xffffff, 0.015);
    scene.fog = new THREE.Fog(0xffffff, 10, 100);

    // create a camera, which defines where we're looking at.
    var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

    // create a render and set the size
    var renderer = new THREE.WebGLRenderer();

    renderer.setClearColor(new THREE.Color(0x000000));
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMap.enabled = true;

    // create the ground plane
    var planeGeometry = new THREE.PlaneGeometry(60, 40, 1, 1);
    var planeMaterial = new THREE.MeshLambertMaterial({
        color: 0xffffff
    });
    var plane = new THREE.Mesh(planeGeometry, planeMaterial);
    plane.receiveShadow = true;

    // rotate and position the plane
    plane.rotation.x = -0.5 * Math.PI;
    plane.position.x = 0;
    plane.position.y = 0;
    plane.position.z = 0;

    // add the plane to the scene
    scene.add(plane);

    // position and point the camera to the center of the scene
    camera.position.x = -40;
    camera.position.y = 20;
    camera.position.z = 40;
    camera.lookAt(scene.position);

    // add subtle ambient lighting
    var ambientLight = new THREE.AmbientLight(0x0c0c0c);
    scene.add(ambientLight);

    // add spotlight for the shadows
    var spotLight = new THREE.SpotLight(0xffffff, 1, 150, 120);
    spotLight.position.set(-40, 60, -10);
    spotLight.castShadow = true;
    scene.add(spotLight);

    // add the output of the renderer to the html element
    document.getElementById("webgl-output").appendChild(renderer.domElement);

    // call the render function
    var step = 0;

    var controls = new function () {
        this.rotationSpeed = 0.02;
        this.numberOfObjects = scene.children.length;

        this.removeCube = function () {
            var allChildren = scene.children;
            var lastObject = allChildren[allChildren.length - 1];
            if (lastObject instanceof THREE.Mesh) {
                scene.remove(lastObject);
                this.numberOfObjects = scene.children.length;
            }
        };

        this.addCube = function () {

            var cubeSize = Math.ceil((Math.random() * 3));
            var cubeGeometry = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize);
            var cubeMaterial = new THREE.MeshLambertMaterial({
                color: 0xFF0000
            });
            var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
            cube.castShadow = true;

            // position the cube randomly in the scene
            cube.position.x = -30 + Math.round((Math.random() * planeGeometry.parameters.width));
            cube.position.y = Math.round((Math.random() * 5));
            cube.position.z = -20 + Math.round((Math.random() * planeGeometry.parameters.height));

            // add the cube to the scene
            scene.add(cube);
            this.numberOfObjects = scene.children.length;
        };

        this.outputObjects = function () {
            console.log(scene.children);
        }
    };

    var gui = new dat.GUI();
    gui.add(controls, 'rotationSpeed', 0, 0.5);
    gui.add(controls, 'addCube');
    gui.add(controls, 'removeCube');
    gui.add(controls, 'outputObjects');
    gui.add(controls, 'numberOfObjects').listen();

    var trackballControls = initTrackballControls(camera, renderer);
    var clock = new THREE.Clock();

    render();

    function render() {

        trackballControls.update(clock.getDelta());
        stats.update();

        // rotate the cubes around its axes
        scene.traverse(function (e) {
            if (e instanceof THREE.Mesh && e != plane) {

                e.rotation.x += controls.rotationSpeed;
                e.rotation.y += controls.rotationSpeed;
                e.rotation.z += controls.rotationSpeed;
            }
        });

        // render using requestAnimationFrame
        requestAnimationFrame(render);
        renderer.render(scene, camera);
    }
}
  • screne.fog = new THREE.For(0xffffff, 0.015, 100),第二个参数是near(近处)属性,第三个是far(远处)属性。 雾的浓度线性增长。
  • screne.fog = new THREE.For(0xffffff, 0.01) 只设置颜色和浓度,浓度随距离指数增长。

场景overrideMaterial属性

通过scene.overrideMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff });来强制设置场景中对象的材质,极端情况可以做性能优化。

show code

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function init() {

    var stats = initStats();

    // create a scene, that will hold all our elements such as objects, cameras and lights.
    var scene = new THREE.Scene();
    scene.overrideMaterial = new THREE.MeshLambertMaterial({
        color: 0xffffff
    });

    // create a camera, which defines where we're looking at.
    var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

    // create a render and set the size
    var renderer = new THREE.WebGLRenderer();

    renderer.setClearColor(new THREE.Color(0x000000));
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMap.enabled = true;

    // create the ground plane
    var planeGeometry = new THREE.PlaneGeometry(60, 40, 1, 1);
    var planeMaterial = new THREE.MeshLambertMaterial({
        color: 0xffffff
    });
    var plane = new THREE.Mesh(planeGeometry, planeMaterial);
    plane.receiveShadow = true;

    // rotate and position the plane
    plane.rotation.x = -0.5 * Math.PI;
    plane.position.x = 0;
    plane.position.y = 0;
    plane.position.z = 0;

    // add the plane to the scene
    scene.add(plane);

    // position and point the camera to the center of the scene
    camera.position.x = -30;
    camera.position.y = 40;
    camera.position.z = 30;
    camera.lookAt(scene.position);

    // add subtle ambient lighting
    var ambientLight = new THREE.AmbientLight(0x0c0c0c);
    scene.add(ambientLight);

    // add spotlight for the shadows
    var spotLight = new THREE.SpotLight(0xffffff, 1, 150, 120);
    spotLight.position.set(-40, 60, -10);
    spotLight.castShadow = true;
    scene.add(spotLight);

    // add the output of the renderer to the html element
    document.getElementById("webgl-output").appendChild(renderer.domElement);

    // call the render function
    var step = 0;

    var controls = new function () {
        this.rotationSpeed = 0.02;
        this.numberOfObjects = scene.children.length;

        this.removeCube = function () {
            var allChildren = scene.children;
            var lastObject = allChildren[allChildren.length - 1];
            if (lastObject instanceof THREE.Mesh) {
                scene.remove(lastObject);
                this.numberOfObjects = scene.children.length;
            }
        };

        this.addCube = function () {

            var cubeSize = Math.ceil((Math.random() * 3));
            var cubeGeometry = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize);
            var cubeMaterial = new THREE.MeshLambertMaterial({
                color: Math.random() * 0xffffff
            });
            var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
            cube.castShadow = true;

            // position the cube randomly in the scene
            cube.position.x = -30 + Math.round((Math.random() * planeGeometry.parameters.width));
            cube.position.y = Math.round((Math.random() * 5));
            cube.position.z = -20 + Math.round((Math.random() * planeGeometry.parameters.height));

            // add the cube to the scene
            scene.add(cube);
            this.numberOfObjects = scene.children.length;
        };

        this.outputObjects = function () {
            console.log(scene.children);
        }
    };

    var gui = new dat.GUI();
    gui.add(controls, 'rotationSpeed', 0, 0.5);
    gui.add(controls, 'addCube');
    gui.add(controls, 'removeCube');
    gui.add(controls, 'outputObjects');
    gui.add(controls, 'numberOfObjects').listen();

    var trackballControls = initTrackballControls(camera, renderer);
    var clock = new THREE.Clock();

    render();

    function render() {

        trackballControls.update(clock.getDelta());
        stats.update();

        // rotate the cubes around its axes
        scene.traverse(function (e) {
            if (e instanceof THREE.Mesh && e != plane) {

                e.rotation.x += controls.rotationSpeed;
                e.rotation.y += controls.rotationSpeed;
                e.rotation.z += controls.rotationSpeed;
            }
        });

        // render using requestAnimationFrame
        requestAnimationFrame(render);
        renderer.render(scene, camera);
    }
}

几何体和网格(mesh)

创建对象的经典步骤,形状,材质,mesh。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var planeGeometry = new THREE.PlaneGeometry(60, 40, 1, 1);
var planeMaterial = new THREE.MeshLambertMaterial({
		color: 0xffffff
});
var plane = new THREE.Mesh(planeGeometry, planeMaterial);

threejs中可用几何体

show code

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function init() {

    var stats = initStats();

    // create a scene, that will hold all our elements such as objects, cameras and lights.
    var scene = new THREE.Scene();

    // create a camera, which defines where we're looking at.
    var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

    // create a render and set the size
    var renderer = new THREE.WebGLRenderer();

    renderer.setClearColor(new THREE.Color(0x000000));
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMap.enabled = true;

    // create the ground plane
    var planeGeometry = new THREE.PlaneGeometry(60, 40, 1, 1);
    var planeMaterial = new THREE.MeshLambertMaterial({
        color: 0xffffff
    });
    var plane = new THREE.Mesh(planeGeometry, planeMaterial);
    plane.receiveShadow = true;

    // rotate and position the plane
    plane.rotation.x = -0.5 * Math.PI;
    plane.position.x = 0;
    plane.position.y = 0;
    plane.position.z = 0;

    // add the plane to the scene
    scene.add(plane);

    // position and point the camera to the center of the scene
    camera.position.x = -50;
    camera.position.y = 30;
    camera.position.z = 20;
    camera.lookAt(new THREE.Vector3(-10, 0, 0));

    // add subtle ambient lighting
    var ambientLight = new THREE.AmbientLight(0x555555);
    scene.add(ambientLight);

    // add spotlight for the shadows
    var spotLight = new THREE.SpotLight(0xffffff, 1.2, 150, Math.PI / 4, 0, 2);
    spotLight.shadow.mapSize.height = 1024;
    spotLight.shadow.mapSize.width = 1024;
    spotLight.position.set(-40, 30, 30);
    spotLight.castShadow = true;
    scene.add(spotLight);

    // add geometries
    addGeometries(scene);

    // add the output of the renderer to the html element
    document.getElementById("webgl-output").appendChild(renderer.domElement);

    // call the render function
    var step = 0;


    function addGeometries(scene) {
        var geoms = [];

        geoms.push(new THREE.CylinderGeometry(1, 4, 4));

        // basic cube
        geoms.push(new THREE.BoxGeometry(2, 2, 2));

        // basic spherer
        geoms.push(new THREE.SphereGeometry(2));

        geoms.push(new THREE.IcosahedronGeometry(4));

        // create a convex shape (a shape without dents)
        // using a couple of points
        // for instance a cube
        var points = [
            new THREE.Vector3(2, 2, 2),
            new THREE.Vector3(2, 2, -2),
            new THREE.Vector3(-2, 2, -2),
            new THREE.Vector3(-2, 2, 2),
            new THREE.Vector3(2, -2, 2),
            new THREE.Vector3(2, -2, -2),
            new THREE.Vector3(-2, -2, -2),
            new THREE.Vector3(-2, -2, 2)
        ];
        geoms.push(new THREE.ConvexGeometry(points));

        // create a lathgeometry
        //http://en.wikipedia.org/wiki/Lathe_(graphics)
        var pts = []; //points array - the path profile points will be stored here
        var detail = .1; //half-circle detail - how many angle increments will be used to generate points
        var radius = 3; //radius for half_sphere
        for (var angle = 0.0; angle < Math.PI; angle += detail) //loop from 0.0 radians to PI (0 - 180 degrees)
            pts.push(new THREE.Vector3(Math.cos(angle) * radius, 0, Math.sin(angle) * radius)); //angle/radius to x,z
        geoms.push(new THREE.LatheGeometry(pts, 12));

        // create a OctahedronGeometry
        geoms.push(new THREE.OctahedronGeometry(3));

        // create a geometry based on a function
        geoms.push(new THREE.ParametricGeometry(THREE.ParametricGeometries.mobius3d, 20, 10));

        //
        geoms.push(new THREE.TetrahedronGeometry(3));

        geoms.push(new THREE.TorusGeometry(3, 1, 10, 10));

        geoms.push(new THREE.TorusKnotGeometry(3, 0.5, 50, 20));

        var j = 0;
        for (var i = 0; i < geoms.length; i++) {
            var cubeMaterial = new THREE.MeshLambertMaterial({
                wireframe: true,
                color: Math.random() * 0xffffff
            });

            var materials = [

                new THREE.MeshLambertMaterial({
                    color: Math.random() * 0xffffff
                }),
                new THREE.MeshBasicMaterial({
                    color: 0x000000,
                    wireframe: true
                })

            ];

            var mesh = THREE.SceneUtils.createMultiMaterialObject(geoms[i], materials);
            mesh.traverse(function (e) {
                e.castShadow = true
            });

            //var mesh = new THREE.Mesh(geoms[i],materials[i]);
            //mesh.castShadow=true;
            mesh.position.x = -24 + ((i % 4) * 12);
            mesh.position.y = 4;
            mesh.position.z = -8 + (j * 12);

            if ((i + 1) % 4 == 0) j++;
            scene.add(mesh);
        }

    }

    
    var trackballControls = initTrackballControls(camera, renderer);
    var clock = new THREE.Clock();

    render();

    function render() {
        trackballControls.update(clock.getDelta());
        stats.update();

        // render using requestAnimationFrame
        requestAnimationFrame(render);
        renderer.render(scene, camera);
    }
}

创建几何体

  • 顶点和面就组合成了几何体
  • three.js也建议使用三角形定义一个面
  • 注意创建面的顶点数据
    • 顺时针——面向摄像机的面
    • 逆时针——背向摄像机的面

show code

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function init() {

  var stats = initStats();

  // create a scene, that will hold all our elements such as objects, cameras and lights.
  var scene = new THREE.Scene();

  // create a camera, which defines where we're looking at.
  var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

  // create a render and set the size
  var renderer = new THREE.WebGLRenderer();

  renderer.setClearColor(new THREE.Color(0x000000));
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.shadowMap.enabled = true;

  // create the ground plane
  var planeGeometry = new THREE.PlaneGeometry(60, 40, 1, 1);
  var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});
  var plane = new THREE.Mesh(planeGeometry, planeMaterial);
  plane.receiveShadow = true;

  // rotate and position the plane
  plane.rotation.x = -0.5 * Math.PI;
  plane.position.x = 0;
  plane.position.y = 0;
  plane.position.z = 0;

  // add the plane to the scene
  scene.add(plane);

  // position and point the camera to the center of the scene
  camera.position.x = -20;
  camera.position.y = 25;
  camera.position.z = 20;
  camera.lookAt(new THREE.Vector3(5, 0, 0));

  // add subtle ambient lighting
  var ambientLight = new THREE.AmbientLight(0x494949);
  scene.add(ambientLight);

  // add the output of the renderer to the html element
  document.getElementById("webgl-output").appendChild(renderer.domElement);

  // call the render function
  var step = 0;


  var vertices = [
      new THREE.Vector3(1, 3, 1),
      new THREE.Vector3(1, 3, -1),
      new THREE.Vector3(1, -1, 1),
      new THREE.Vector3(1, -1, -1),
      new THREE.Vector3(-1, 3, -1),
      new THREE.Vector3(-1, 3, 1),
      new THREE.Vector3(-1, -1, -1),
      new THREE.Vector3(-1, -1, 1)
  ];

  var faces = [
      new THREE.Face3(0, 2, 1),
      new THREE.Face3(2, 3, 1),
      new THREE.Face3(4, 6, 5),
      new THREE.Face3(6, 7, 5),
      new THREE.Face3(4, 5, 1),
      new THREE.Face3(5, 0, 1),
      new THREE.Face3(7, 6, 2),
      new THREE.Face3(6, 3, 2),
      new THREE.Face3(5, 7, 0),
      new THREE.Face3(7, 2, 0),
      new THREE.Face3(1, 3, 4),
      new THREE.Face3(3, 6, 4),
  ];

  var geom = new THREE.Geometry();
  geom.vertices = vertices;
  geom.faces = faces;
  geom.computeFaceNormals();

  var materials = [
    new THREE.MeshBasicMaterial({color: 0x000000, wireframe: true}),
    new THREE.MeshLambertMaterial({opacity: 0.6, color: 0x44ff44, transparent: true})
  ];

  var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, materials);
  mesh.castShadow = true;
  mesh.children.forEach(function (e) {
      e.castShadow = true
  });

  scene.add(mesh);

  // add spotlight for the shadows
  var spotLight = new THREE.SpotLight(0xffffff, 1, 180, Math.PI/4);
  spotLight.shadow.mapSize.height = 2048;
  spotLight.shadow.mapSize.width = 2048;
  spotLight.position.set(-40, 30, 30);
  spotLight.castShadow = true;
  spotLight.lookAt(mesh);
  scene.add(spotLight);

  function addControl(x, y, z) {
      var controls = new function () {
          this.x = x;
          this.y = y;
          this.z = z;
      };

      return controls;
  }

  var controlPoints = [];
  controlPoints.push(addControl(3, 5, 3));
  controlPoints.push(addControl(3, 5, 0));
  controlPoints.push(addControl(3, 0, 3));
  controlPoints.push(addControl(3, 0, 0));
  controlPoints.push(addControl(0, 5, 0));
  controlPoints.push(addControl(0, 5, 3));
  controlPoints.push(addControl(0, 0, 0));
  controlPoints.push(addControl(0, 0, 3));

  var gui = new dat.GUI();
  gui.add(new function () {
      this.clone = function () {

          var clonedGeometry = mesh.children[0].geometry.clone();
          var materials = [
              new THREE.MeshLambertMaterial({opacity: 0.8, color: 0xff44ff, transparent: true}),
              new THREE.MeshBasicMaterial({color: 0x000000, wireframe: true})
          ];

          var mesh2 = THREE.SceneUtils.createMultiMaterialObject(clonedGeometry, materials);
          mesh2.children.forEach(function (e) {
              e.castShadow = true
          });

          mesh2.translateX(5);
          mesh2.translateZ(5);
          mesh2.name = "clone";
          scene.remove(scene.getChildByName("clone"));
          scene.add(mesh2);


      }
  }, 'clone');

  for (var i = 0; i < 8; i++) {

      f1 = gui.addFolder('Vertices ' + (i + 1));
      f1.add(controlPoints[i], 'x', -10, 10);
      f1.add(controlPoints[i], 'y', -10, 10);
      f1.add(controlPoints[i], 'z', -10, 10);

  }

  var trackballControls = initTrackballControls(camera, renderer);
  var clock = new THREE.Clock();

  render();

  function render() {
      trackballControls.update(clock.getDelta());
      stats.update();

      var vertices = [];
      for (var i = 0; i < 8; i++) {
          vertices.push(new THREE.Vector3(controlPoints[i].x, controlPoints[i].y, controlPoints[i].z));
      }

      mesh.children.forEach(function (e) {
          e.geometry.vertices = vertices;
          e.geometry.verticesNeedUpdate = true;
          e.geometry.computeFaceNormals();
          delete e.geometry.__directGeometry
      });

      // render using requestAnimationFrame
      requestAnimationFrame(render);
      renderer.render(scene, camera);
  }
}

mesh网格对象的属性和方法

网格 = 形状 + 材质

mesh网格对象的属性和方法:

方法/属性

position

相对于父对象的位置。父对象通常是THREE.Scene或者THREE.Object3D对象

rotation

设置每个轴的旋转弧度,可以分别设置rotateX(),rotateY(),rotateZ()

scale

通过x,y,z轴缩放对象

translateX(amount)

沿x轴将对象平移amound 距离

translateY(amount)

沿y轴将对象平移amound 距离

translateZ(amount)

沿z轴将对象平移amound 距离

visible

为false时,mesh对象将不会被渲染到场景中

show code

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function init() {

  var stats = initStats();

  // create a scene, that will hold all our elements such as objects, cameras and lights.
  var scene = new THREE.Scene();

  // create a camera, which defines where we're looking at.
  var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

  // create a render and set the size
  var renderer = new THREE.WebGLRenderer();

  renderer.setClearColor(new THREE.Color(0x000000));
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.shadowMap.enabled = true;

  // create the ground plane
  var planeGeometry = new THREE.PlaneGeometry(60, 40, 1, 1);
  var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});
  var plane = new THREE.Mesh(planeGeometry, planeMaterial);
  plane.receiveShadow = true;

  // rotate and position the plane
  plane.rotation.x = -0.5 * Math.PI;
  plane.position.x = 0;
  plane.position.y = 0;
  plane.position.z = 0;

  // add the plane to the scene
  scene.add(plane);

  // position and point the camera to the center of the scene
  camera.position.x = -30;
  camera.position.y = 40;
  camera.position.z = 30;
  camera.lookAt(scene.position);

  // add subtle ambient lighting
  var ambientLight = new THREE.AmbientLight(0x3c3c3c);
  scene.add(ambientLight);

  // add spotlight for the shadows
  // add spotlight for the shadows
  var spotLight = new THREE.SpotLight(0xffffff, 1, 180, Math.PI/4);
  spotLight.shadow.mapSize.height = 2048;
  spotLight.shadow.mapSize.width = 2048;
  spotLight.position.set(-40, 30, 30);
  spotLight.castShadow = true;
  scene.add(spotLight);

  // add the output of the renderer to the html element
  document.getElementById("webgl-output").appendChild(renderer.domElement);

  // call the render function
  var step = 0;

  var controls = new function () {
      this.scaleX = 1;
      this.scaleY = 1;
      this.scaleZ = 1;

      this.positionX = 0;
      this.positionY = 4;
      this.positionZ = 0;

      this.rotationX = 0;
      this.rotationY = 0;
      this.rotationZ = 0;
      this.scale = 1;

      this.translateX = 0;
      this.translateY = 0;
      this.translateZ = 0;

      this.visible = true;

      this.translate = function () {

          cube.translateX(controls.translateX);
          cube.translateY(controls.translateY);
          cube.translateZ(controls.translateZ);

          controls.positionX = cube.position.x;
          controls.positionY = cube.position.y;
          controls.positionZ = cube.position.z;
      }
  };


  var material = new THREE.MeshLambertMaterial({color: 0x44ff44});
  var geom = new THREE.BoxGeometry(5, 8, 3);

  // var materials = [
  //   new THREE.MeshLambertMaterial({opacity: 0.8, color: 0x44ff44, transparent: true}),
  //   new THREE.MeshBasicMaterial({color: 0x000000, wireframe: true})
  // ];

  // var cube = THREE.SceneUtils.createMultiMaterialObject(geom, materials);

  var cube = new THREE.Mesh(geom, material);
  cube.position.y = 4;
  cube.castShadow = true;
  scene.add(cube);


  var gui = new dat.GUI();

  guiScale = gui.addFolder('scale');
  guiScale.add(controls, 'scaleX', 0, 5);
  guiScale.add(controls, 'scaleY', 0, 5);
  guiScale.add(controls, 'scaleZ', 0, 5);

  guiPosition = gui.addFolder('position');
  var contX = guiPosition.add(controls, 'positionX', -10, 10);
  var contY = guiPosition.add(controls, 'positionY', -4, 20);
  var contZ = guiPosition.add(controls, 'positionZ', -10, 10);

  contX.listen();
  contX.onChange(function (value) {
      cube.position.x = controls.positionX;
      // cube.children[1].position.x = controls.positionX;
  });

  contY.listen();
  contY.onChange(function (value) {
      cube.position.y = controls.positionY;
  });

  contZ.listen();
  contZ.onChange(function (value) {
      cube.position.z = controls.positionZ;
  });


  guiRotation = gui.addFolder('rotation');
  guiRotation.add(controls, 'rotationX', -4, 4);
  guiRotation.add(controls, 'rotationY', -4, 4);
  guiRotation.add(controls, 'rotationZ', -4, 4);

  guiTranslate = gui.addFolder('translate');

  guiTranslate.add(controls, 'translateX', -10, 10);
  guiTranslate.add(controls, 'translateY', -10, 10);
  guiTranslate.add(controls, 'translateZ', -10, 10);
  guiTranslate.add(controls, 'translate');

  gui.add(controls, 'visible');

  var trackballControls = initTrackballControls(camera, renderer);
  var clock = new THREE.Clock();

  render();

  function render() {
      trackballControls.update(clock.getDelta());
      stats.update();
      cube.visible = controls.visible;

      cube.rotation.x = controls.rotationX;
      cube.rotation.y = controls.rotationY;
      cube.rotation.z = controls.rotationZ;

      cube.scale.set(controls.scaleX, controls.scaleY, controls.scaleZ);
      requestAnimationFrame(render);
      renderer.render(scene, camera);
  }
}

选择合适的摄像机

正交投影摄像机和透视投影摄像机

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function init() {

  var stats = initStats();

  // create a scene, that will hold all our elements such as objects, cameras and lights.
  var scene = new THREE.Scene();

  // create a camera, which defines where we're looking at.
  var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
  camera.position.x = 120;
  camera.position.y = 60;
  camera.position.z = 180;

  // create a render and set the size
  var renderer = new THREE.WebGLRenderer();

  renderer.setClearColor(new THREE.Color(0x000000));
  renderer.setSize(window.innerWidth, window.innerHeight);

  // create the ground plane
  var planeGeometry = new THREE.PlaneGeometry(180, 180);
  var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});
  var plane = new THREE.Mesh(planeGeometry, planeMaterial);


  // rotate and position the plane
  plane.rotation.x = -0.5 * Math.PI;
  plane.position.x = 0;
  plane.position.y = 0;
  plane.position.z = 0;

  // add the plane to the scene
  scene.add(plane);

  var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);

  for (var j = 0; j < (planeGeometry.parameters.height / 5); j++) {
      for (var i = 0; i < planeGeometry.parameters.width / 5; i++) {
          var rnd = Math.random() * 0.75 + 0.25;
          var cubeMaterial = new THREE.MeshLambertMaterial();
          cubeMaterial.color = new THREE.Color(rnd, 0, 0);
          var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

          cube.position.z = -((planeGeometry.parameters.height) / 2) + 2 + (j * 5);
          cube.position.x = -((planeGeometry.parameters.width) / 2) + 2 + (i * 5);
          cube.position.y = 2;

          scene.add(cube);
      }
  }


  var directionalLight = new THREE.DirectionalLight(0xffffff, 0.7);
  directionalLight.position.set(-20, 40, 60);
  scene.add(directionalLight);


  // add subtle ambient lighting
  var ambientLight = new THREE.AmbientLight(0x292929);
  scene.add(ambientLight);

  // add the output of the renderer to the html element
  document.getElementById("webgl-output").appendChild(renderer.domElement);

  // call the render function
  var step = 0;

  var trackballControls
  var controls = new function () {
      this.perspective = "Perspective";
      this.switchCamera = function () {
          if (camera instanceof THREE.PerspectiveCamera) {
              camera = new THREE.OrthographicCamera(window.innerWidth / -16, window.innerWidth / 16, window.innerHeight / 16, window.innerHeight / -16, -200, 500);
              camera.position.x = 120;
              camera.position.y = 60;
              camera.position.z = 180;
              camera.lookAt(scene.position);

              trackballControls = initTrackballControls(camera, renderer);
              this.perspective = "Orthographic";
          } else {
              camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
              camera.position.x = 120;
              camera.position.y = 60;
              camera.position.z = 180;

              

              camera.lookAt(scene.position);
              trackballControls = initTrackballControls(camera, renderer);
              this.perspective = "Perspective";
          }
      };
  };

  var gui = new dat.GUI();
  gui.add(controls, 'switchCamera');
  gui.add(controls, 'perspective').listen();

  // make sure that for the first time, the
  // camera is looking at the scene
  camera.lookAt(scene.position);

  trackballControls = initTrackballControls(camera, renderer);
  var clock = new THREE.Clock();

  render();

  function render() {
      trackballControls.update(clock.getDelta());
      stats.update();

      // render using requestAnimationFrame
      requestAnimationFrame(render);
      renderer.render(scene, camera);
  }
}
  • 正交投影摄像机(THREE.PerspectiveCamera):所有的立方体被渲染出来的尺寸都是一样(对象相对于摄像机的距离怼渲染的结果是没有影响的)
  • 透视投影摄像机(THREE.OrthographicCamera):透视效果
透视投影摄像机(THREE.PerspectiveCamera)
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
PerspectiveCamera( fov, aspect, near, far )

参数

含义

推荐默认值

fov

fov表示视场,所谓视场就是能够看到的角度范围,人的眼睛大约能够看到180度的视场,视角大小设置要根据具体应用,一般游戏会设置60~90度

45

aspect(长宽比)

aspect表示渲染窗口的长宽比,如果一个网页上只有一个全屏的canvas画布且画布上只有一个窗口,那么aspect的值就是网页窗口客户区的宽高比

window.innerWidth/window.innerHeight

near(近面距离)

near属性表示的是从距离相机多远的位置开始渲染,一般情况会设置一个很小的值。

0.1

far(远面距离)

far属性表示的是距离相机多远的位置截止渲染,如果设置的值偏小小,会有部分场景看不到

1000

zoom(变焦)

zoom 属性可以放大和缩小场景。小于1场景缩小,大于1场景放大,负数,场景会上下颠倒

1

正交投影摄像机(THREE.PerspectiveCamera)
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
OrthographicCamera( left, right, top, bottom, near, far )

参数

含义

推荐默认值

left

渲染空间的左边界

right

渲染空间的右边界

top

渲染空间的上边界

bottom

渲染空间的下边界

near

near属性表示的是从距离相机多远的位置开始渲染,一般情况会设置一个很小的值。

0.1

far

far属性表示的是距离相机多远的位置截止渲染,如果设置的值偏小小,会有部分场景看不到

1000

zoom(变焦)

zoom 属性可以放大和缩小场景。小于1场景缩小,大于1场景放大,负数,场景会上下颠倒

1

设置摄像机聚焦

默认摄像机指向场景的中心position(0,0,0),我们可以随意更改。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
camera.lookAt(new THTREE.Vector3(x,y,z));

或者还可以设置跟随某个对象camera.lookAt(mesh.position);

如下是两种摄像机下,改变摄像机聚焦点的效果。

show code

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function init() {

  var stats = initStats();

  // create a scene, that will hold all our elements such as objects, cameras and lights.
  var scene = new THREE.Scene();

  // create a camera, which defines where we're looking at.
  var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
  camera.position.x = 120;
  camera.position.y = 60;
  camera.position.z = 180;

  // create a render and set the size
  var renderer = new THREE.WebGLRenderer();

  renderer.setClearColor(new THREE.Color(0x000000));
  renderer.setSize(window.innerWidth, window.innerHeight);

  // create the ground plane
  var planeGeometry = new THREE.PlaneGeometry(180, 180);
  var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});
  var plane = new THREE.Mesh(planeGeometry, planeMaterial);


  // rotate and position the plane
  plane.rotation.x = -0.5 * Math.PI;
  plane.position.x = 0;
  plane.position.y = 0;
  plane.position.z = 0;

  // add the plane to the scene
  scene.add(plane);

  var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
  for (var j = 0; j < (planeGeometry.parameters.height / 5); j++) {
      for (var i = 0; i < planeGeometry.parameters.width / 5; i++) {
          var rnd = Math.random() * 0.75 + 0.25;
          var cubeMaterial = new THREE.MeshLambertMaterial();
          cubeMaterial.color = new THREE.Color(rnd, 0, 0);
          var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

          cube.position.z = -((planeGeometry.parameters.height) / 2) + 2 + (j * 5);
          cube.position.x = -((planeGeometry.parameters.width) / 2) + 2 + (i * 5);
          cube.position.y = 2;

          scene.add(cube);
      }
  }

  var lookAtGeom = new THREE.SphereGeometry(2);
  var lookAtMesh = new THREE.Mesh(lookAtGeom, new THREE.MeshLambertMaterial({color: 0x00ff00}));
  scene.add(lookAtMesh);


  var directionalLight = new THREE.DirectionalLight(0xffffff, 0.7);
  directionalLight.position.set(-20, 40, 60);
  scene.add(directionalLight);


  // add subtle ambient lighting
  var ambientLight = new THREE.AmbientLight(0x292929);
  scene.add(ambientLight);

  // add the output of the renderer to the html element
  document.getElementById("webgl-output").appendChild(renderer.domElement);

  // call the render function
  var step = 0;

  var controls = new function () {
      this.perspective = "Perspective";
      this.switchCamera = function () {
          if (camera instanceof THREE.PerspectiveCamera) {
              camera = new THREE.OrthographicCamera(window.innerWidth / -16, window.innerWidth / 16, window.innerHeight / 16, window.innerHeight / -16, -200, 500);
              camera.position.x = 120;
              camera.position.y = 60;
              camera.position.z = 180;

              camera.lookAt(scene.position);
              this.perspective = "Orthographic";
          } else {
              camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
              camera.position.x = 120;
              camera.position.y = 60;
              camera.position.z = 180;

              camera.lookAt(scene.position);
              this.perspective = "Perspective";
          }
      };
  };

  var gui = new dat.GUI();
  gui.add(controls, 'switchCamera');
  gui.add(controls, 'perspective').listen();

  // make sure that for the first time, the
  // camera is looking at the scene
  //   camera.lookAt(scene.position);
  render();


  var step = 0;

  function render() {

      stats.update();
      // render using requestAnimationFrame
      step += 0.02;
      if (camera instanceof THREE.Camera) {
          var x = 10 + ( 100 * (Math.sin(step)));
          camera.lookAt(new THREE.Vector3(x, 10, 0));
          lookAtMesh.position.copy(new THREE.Vector3(x, 10, 0));
      }

//        .position.x = 20+( 10*(Math.cos(step)));
      requestAnimationFrame(render);
      renderer.render(scene, camera);
  }
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
不是ManusAI用不起,而是AgenticSeek更有性价比,炸裂的项目,100%本地运行的AI秘书,真的丝滑啦!
嗨,大家好,我是小华同学,关注我们获得“最新、最全、最优质”开源项目和高效工作学习方法
小华同学ai
2025/05/30
8390
不是ManusAI用不起,而是AgenticSeek更有性价比,炸裂的项目,100%本地运行的AI秘书,真的丝滑啦!
KrillinAI:基于AI大模型的一站式视频翻译配音解决方案
在全球内容创作领域,跨语言传播一直是内容创作者面临的巨大挑战。传统的视频本地化流程繁琐,涉及多个环节和工具,不仅耗时耗力,还常常面临质量不稳定的问题。随着大语言模型(LLM)技术的迅猛发展,一款名为KrillinAI的开源工具横空出世,为内容创作者带来了革命性的视频翻译与配音解决方案。本文将深入剖析这款GitHub上备受瞩目的项目,探讨其技术架构、核心功能及应用价值。
CoderJia
2025/04/16
6490
KrillinAI:基于AI大模型的一站式视频翻译配音解决方案
Dify + OceanBase + MCP:三剑合璧,轻松构建 RAG 应用
在 AI 应用开发领域,检索增强生成(Retrieval Augmented Generation,RAG)已成为构建智能问答、文档分析等场景的核心技术。通过 RAG,AI 应用能够结合现有知识库,在生成回答时引入外部信息,从而为用户提供更准确、更智能的响应。本文将通过一个实践案例,展示如何使用 Dify、OceanBase 和 MCP,从零开始构建一个功能完备的 RAG 应用。
Se7en258
2025/06/28
3670
Dify + OceanBase + MCP:三剑合璧,轻松构建 RAG 应用
使用 browser-use-webui 进行网页信息填写和录入
在数字化时代,网页信息填写和录入是许多业务流程中的重要环节,例如注册账户、提交在线表单或更新个人信息。这些任务往往耗时且容易出错,而自动化工具的引入可以显著提高效率并减少人为失误。GitHub 上的 browser-use/web-ui 项目为这一需求提供了一个创新且实用的解决方案。
叶子Tenney
2025/03/13
1.5K0
使用 browser-use-webui 进行网页信息填写和录入
拥有自我意识的AI:AutoGPT | 得物技术
ChatGPT在当下已经风靡一时,作为自然语言处理模型的佼佼者,ChatGPT的优势在于其能够生成流畅、连贯的对话,同时还能够理解上下文并根据上下文进行回答。针对不同的应用场景可以进行快速定制,例如,在客服、教育、娱乐等领域中,ChatGPT可以作为智能助手为用户提供便捷的服务和娱乐体验。
得物技术
2023/05/25
6170
拥有自我意识的AI:AutoGPT | 得物技术
Windsurf Wave3:MCP协议让AI直接读取控制台错误,自动化网页调试不用复制粘贴了!Tab智能跳转、Turbo模式。
先回顾一下 Wave 2 :不用写cursorrules了!「Windsurf Wave 2」强势上线:全新 Cascade 能力+自动记忆双管齐下
AI进修生
2025/02/18
1.9K0
Windsurf Wave3:MCP协议让AI直接读取控制台错误,自动化网页调试不用复制粘贴了!Tab智能跳转、Turbo模式。
字节DeerFlow开源框架:多智能体深度研究框架,实现端到端自动化研究流程
DeerFlow(Deep Exploration and Efficient Research Flow)是一个社区驱动的深度研究框架,它建立在开源社区的杰出工作基础之上。目标是将语言模型与专业工具(如网络搜索、爬虫和Python代码执行)相结合.。
汀丶人工智能
2025/05/13
8320
字节DeerFlow开源框架:多智能体深度研究框架,实现端到端自动化研究流程
Void:AI编码浪潮中的开源“黑马”,会是Cursor的免费、隐私友好型替代品吗?
开发者圈儿里最近有点小激动,大家都在议论一个叫Void的开源AI代码编辑器。这家伙在GitHub上人气飙涨,短时间内就斩获了超过22.1k的星标,简直成了科技圈的新宠。它被誉为“黑马”,不仅因为它继承了大家都很熟悉的Visual Studio Code (VS Code) 的优良血统,更重要的是,它融入了一套强大的、特别注重隐私的AI编码辅助工具,目标就是让咱们写代码更轻松、更高效。
攻坚克难的那份表
2025/05/29
9010
Void:AI编码浪潮中的开源“黑马”,会是Cursor的免费、隐私友好型替代品吗?
如何在本地部署开源通用智能体OpenManus &OpenManus-OWL项目?
近期,国内团队推出的通用型AI Agent产品Manus因在GAIA基准测试中刷新性能记录引发行业关注,其"手脑协同"能力可完成简历筛选、旅行规划等复杂任务,内测邀请码一度被炒至数万元。但对于开发者而言,依赖商业产品存在技术黑箱与成本限制。值得庆幸的是,Meta GPT团队与Camel团队已分别开源了 OpenManus和OpenManus-OWL ,为开发者提供了自主部署的解决方案。本文将深入解析本地部署的技术路径与替代方案。
猫头虎
2025/03/09
1.6K0
从AI助手到个性化数字分身:WeClone & Second Me打造本地化、私有化的个性化AI代理系统
随着大语言模型(LLM)和语音合成技术的快速发展,个性化AI代理的实现变得愈发可行。近期,一个名为 WeClone 的开源项目引起了开发者社区的关注。该项目旨在通过用户的微信聊天记录,训练出一个高度个性化的对话模型,从而实现“数字版的你”,在一定程度上探索“数字永生”的可能性。
汀丶人工智能
2025/05/11
8900
从AI助手到个性化数字分身:WeClone & Second Me打造本地化、私有化的个性化AI代理系统
Brave 浏览器即将在 Android 上推出全新 AI 助手“Leo”
Brave 软件公司近日宣布推出一款名为 "Leo "的新型隐私保护人工智能助手,该助手将在最新发布的1.63版本安卓版浏览器上出现。
FB客服
2024/03/07
1650
Brave 浏览器即将在 Android 上推出全新 AI 助手“Leo”
字节也在发力开源了
长期跟踪关注统计学、机器学习算法、深度学习、人工智能、大模型技术与行业发展动态,日更精选技术文章。回复机器学习有惊喜资料。
Ai学习的老章
2025/06/08
1590
字节也在发力开源了
Manus的开源免费替代品GitHub狂揽20.7K星!OpenManus!
2025年被誉为AI代理元年,OpenManus的爆红有力地印证了这一说法。AI技术日趋成熟,AI代理正逐步改变我们的工作方式,它不仅能理解和生成文本、编写代码,更能直接操控电脑,执行各种任务,例如浏览网页、处理文件等。未来,AI代理将如同办公软件般无处不在,融入我们生活的方方面面。
码农编程进阶笔记
2025/03/12
6290
Manus的开源免费替代品GitHub狂揽20.7K星!OpenManus!
无缝融入,即刻智能[一]:Dify-LLM大模型平台,零编码集成嵌入第三方系统,42K+星标见证专属智能方案
Dify,一款引领未来的开源大语言模型(LLM)应用开发平台,革新性地融合了后端即服务(Backend as a Service,BaaS)与LLMOps的精髓,为开发者铺设了一条从创意原型到高效生产的快车道。其设计旨在打破技术壁垒,让非技术背景的用户也能轻松参与至AI应用的构思与数据运营之中,共同塑造智能未来。
汀丶人工智能
2024/08/17
3.3K0
无缝融入,即刻智能[一]:Dify-LLM大模型平台,零编码集成嵌入第三方系统,42K+星标见证专属智能方案
Docker Desktop 4.42 发布,带来原生 IPv6、集成的 MCP 工具包以及 AI 模型打包功能
Docker 公司发布了 Docker Desktop 4.42 版本,该版本增强了网络灵活性、AI 工作流集成和模型分发功能。原生 IPv6 支持现在允许用户在双栈、仅 IPv4 或仅 IPv6 模式之间进行选择,并具有智能 DNS 解析。Docker 声称,改进的连接选项使 Docker Desktop 更能适应多样化的企业网络环境。
深度学习与Python
2025/07/16
1310
Docker Desktop 4.42 发布,带来原生 IPv6、集成的 MCP 工具包以及 AI 模型打包功能
字节 Coze 今天开源了!普通人不会代码也能5分钟开发 AI 助手!
希里安最近已经分享了如何使用Gemini CLI 、Rovo Dev CLI、 Claude Code CLI、Kiro、Qwen Code这些AI工具,而今天Coze又开源了,希里安来给大家分享一波!
希里安
2025/07/29
2K1
字节 Coze 今天开源了!普通人不会代码也能5分钟开发 AI 助手!
AI浏览器自动化实战
短短几个月内,Browser use 已在 GitHub 上获得超过 5 万颗 star:
程序员NEO
2025/04/16
9910
AI浏览器自动化实战
AI日报 - 2025年4月2日
▎🤖 AGI突破 | 研究揭示零RL训练可诱发模型顿悟,Anthropic发布Claude 3.5内部机制研究,简化语言模型推理优化新方法提出。
訾博ZiBo
2025/04/01
2730
AI日报 - 2025年4月2日
基于Ollama平台的DeepSeek-R1目标检测模型本地部署与应用研究【DeepSeek保姆级本地部署教程】
在人工智能领域,大型语言模型(LLM)正变得越来越普及,许多用户希望能够在本地环境中运行这些模型,以确保数据隐私、定制化需求或离线工作的便捷性。DeepSeek-R1 是近期备受关注的高性能 AI 推理模型,专注于数学、编程和自然语言推理任务。与此同时,Ollama 作为一款强大的工具,帮助用户在本地环境中轻松部署和管理大型语言模型。
一键难忘
2025/02/04
3.5K0
基于Ollama平台的DeepSeek-R1目标检测模型本地部署与应用研究【DeepSeek保姆级本地部署教程】
在Jetson上玩转大模型Day3:TGW智能助手
TGW是Text-Generation-Webui项目的缩写,这是2023年随着ChatGPT的火爆浪潮中,让我们能搭配开源LLM模型,在本地搭建可对话智能助手的项目,就不用整体担心源头单位的朝令夕改所产生的风险。
GPUS Lady
2024/10/25
2330
在Jetson上玩转大模型Day3:TGW智能助手
推荐阅读
不是ManusAI用不起,而是AgenticSeek更有性价比,炸裂的项目,100%本地运行的AI秘书,真的丝滑啦!
8390
KrillinAI:基于AI大模型的一站式视频翻译配音解决方案
6490
Dify + OceanBase + MCP:三剑合璧,轻松构建 RAG 应用
3670
使用 browser-use-webui 进行网页信息填写和录入
1.5K0
拥有自我意识的AI:AutoGPT | 得物技术
6170
Windsurf Wave3:MCP协议让AI直接读取控制台错误,自动化网页调试不用复制粘贴了!Tab智能跳转、Turbo模式。
1.9K0
字节DeerFlow开源框架:多智能体深度研究框架,实现端到端自动化研究流程
8320
Void:AI编码浪潮中的开源“黑马”,会是Cursor的免费、隐私友好型替代品吗?
9010
如何在本地部署开源通用智能体OpenManus &OpenManus-OWL项目?
1.6K0
从AI助手到个性化数字分身:WeClone & Second Me打造本地化、私有化的个性化AI代理系统
8900
Brave 浏览器即将在 Android 上推出全新 AI 助手“Leo”
1650
字节也在发力开源了
1590
Manus的开源免费替代品GitHub狂揽20.7K星!OpenManus!
6290
无缝融入,即刻智能[一]:Dify-LLM大模型平台,零编码集成嵌入第三方系统,42K+星标见证专属智能方案
3.3K0
Docker Desktop 4.42 发布,带来原生 IPv6、集成的 MCP 工具包以及 AI 模型打包功能
1310
字节 Coze 今天开源了!普通人不会代码也能5分钟开发 AI 助手!
2K1
AI浏览器自动化实战
9910
AI日报 - 2025年4月2日
2730
基于Ollama平台的DeepSeek-R1目标检测模型本地部署与应用研究【DeepSeek保姆级本地部署教程】
3.5K0
在Jetson上玩转大模型Day3:TGW智能助手
2330
相关推荐
不是ManusAI用不起,而是AgenticSeek更有性价比,炸裂的项目,100%本地运行的AI秘书,真的丝滑啦!
更多 >
LV.1
腾讯前端工程师
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验