This dish chicken recently tried to do some things with cocos, encountered some problems, probably most of them are novices may encounter, this article to make a record and summary. (The following content is all based on COCOS Creator version 3.4, if it is a higher version of CoCOS, there may be some DEGREE of API change)

Objects scale and rotate

One of the most common basic functions encountered in 3D scene development may be the need for object scaling or scene scaling, which is achieved mainly by manipulating the camera. Generally speaking, just control the main camera.

Quaternions are mainly used to realize rotation. The usual scenes of rotation are rotation according to a certain track, rotation around an axis, and rotation at any Angle of itself. Here is a rotation example quaternions with a 3D rotation example! Cocos Creator 3D Quternion can be referred to. I can open it normally in cocos 3.3.2.

Zooming in and out is achieved by zooming in and out. The PC can change the location of the node by listening to the mouse wheel and triggering this.Node.Translate (changeVec).

The zoom in and out of the mobile terminal needs to be detected by two-finger touch points. Determine how much to zoom in and out by detecting the distance between the start and end touches. To determine whether to enlarge or shrink the function can be written roughly as follows:

private isEnlarge(oldPos1: Vec2, oldPos2: Vec2, tempPos1: Vec2, tempPos2: Vec2): boolean {
    const len1 = Vec2.distance(oldPos1, oldPos2)
    const len2 = Vec2.distance(tempPos1, tempPos2)
    // Magnify gestures
    if (len1 < len2) {
        return true
    }
    // Zoom out gesture
    if (len1 > len2) {
        return false}}Copy the code

Color adjustment

Color changes are often required in games or 3D scenes, and cocos currently does not support direct color changes through scripts. Instead, it uses scripts to pass values to shaders. The shader for cocos is defined and modified as an effect file. For a basic introduction to the Cocos Shader, watch this video: Cocos Creator Shader Starter Tutorial

How to pass the values defined by the script to the shader was explained in the concrete example of texture dissolving in the video, but I’ll go over that separately.

The first step is to write a script where the property will write a Node to add the object that you want to change color to in the future, let’s call it ChangeColorMesh. There will be a lot of Material in the ChangeColorMesh, let’s say we want to change the effect color in Material[0]. It can be written like this:

@property({
    type: Node
})
ChangeMesh: Node | null = null;

const tryVal = this.ChangeMesh.getComponent(MeshRenderer)
Copy the code

If the effect inside your material has a property “mainColor”, we can change the material’s color by passing a value to the “mainColor” inside the effect. The general writing method can refer to this:

 let test = new Color()
 if (paintVal.getProperty("mainColor")) {
    paintVal.setProperty("mainColor", Color.set(test, randomVal1, ramdomVal2, 47.255))}Copy the code

Cross-domain communication

If you want to embed cocos content in your own Web pages, consider using the IFrame scheme. However, if iframe is deployed separately, cross-domain communication issues may need to be considered. PostMessage: Failed to execute ‘postMessage’ on ‘DOMWindow

Ray detection

Ray detection is needed for COCOS to realize touch or collision of 3D objects, while UITransform is for 2D objects and cannot be used for 3D touch detection. Cocos provides three different detection methods, namely physical collider based radiography, model based radiography, and UITransform based radiography. For details, please refer to the following documents: Cocos Creator 3D and this article Cocos 3.x 3D physics system X-ray Detection